antV自定义布局

<template>

  <div class="app-container">

    <el-card>
      <div style="display: flex;align-items: center;margin-bottom: 20px;cursor: pointer;">
        <img
            src="@/assets/img/left.png"
            alt
            @click="handleBack"
        /><span style="color:#10acff;padding-left: 5px;" @click="handleBack">返回</span>
      </div>
      <div style="display: flex;align-items: center;margin-bottom: 20px;">
        <span style="color:#10acff;padding-left: 5px;font-size: 14px;">节点可进行拖拽</span>
      </div>
      <el-form inline class="inputStyle no-border">
        <el-row>
          <el-col :span="20">
            <el-form-item label="地市：">
              <el-select v-model="queryForm.City" @change="queryFivePhysicsRooms" placeholder="请选择">
                <el-option
                    v-for="item in CityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机房：">
              <el-select v-model="queryForm.Room" placeholder="请选择">
                <el-option
                    v-for="item in RoomList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="模糊查询：">
              <el-input v-model="queryForm.FuzzyQueries" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-button plain @click="reset">重置</el-button>
              <el-button type="primary" @click="handleSearch">查询</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
<!--      <div-->
<!--          id="graph"-->
<!--          ref="graph"-->
<!--          :style="{ height: '650px', width: '100%',background: '#f7f8fa' }"-->
<!--      ></div>-->
      <span style="display: flex">
         <div :style="{width:Length==1? '100%':'50%'}" ><five-uroom-detail1 :style="{width:Length==1? '120%':'100%'}" :List1="List1" ref="f1"></five-uroom-detail1></div>
      <div  style="width: 50%;"><five-uroom-detail2  v-show="Length==3||Length==2" :List2="List2" ref="f2" ></five-uroom-detail2></div>

      </span>
      <div  style="width: 100%;"><five-uroom-detail3 v-show="Length==3" :List3="List3"></five-uroom-detail3></div>

      <Dialog v-model="confirmDialog" top="5%" width="1400px" :title="title" @cancel="cancel">
        <div class="system_info_list">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="title">
                <div class="title_name">设备类型:</div>
                <div class="content">{{ rowTotalInfo.equipment_type ? rowTotalInfo.equipment_type : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">设备名称:</div>
                <div class="content">{{ rowTotalInfo.equipment_name ? rowTotalInfo.equipment_name : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">设备类型2:</div>
                <div class="content">
                  <!-- <p>99</p> -->
                  {{ rowTotalInfo.equipment_type_two ? rowTotalInfo.equipment_type_two : '' }}
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">设备厂商:</div>
                <div class="content">{{ rowTotalInfo.equipment_factory ? rowTotalInfo.equipment_factory : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">所属业务:</div>
                <div class="content">{{ rowTotalInfo.business ? rowTotalInfo.business : '' }}</div>
              </div>
            </el-col>

            <el-col :span="12">
              <div class="title">
                <div class="title_name">覆盖地区:</div>
                <div class="content">{{ rowTotalInfo.coverage_area ? rowTotalInfo.coverage_area : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">机房:</div>
                <div class="content">{{ rowTotalInfo.computer_room ? rowTotalInfo.computer_room : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">楼层:</div>
                <div class="content">{{ rowTotalInfo.floor ? rowTotalInfo.floor : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">机柜:</div>
                <div class="content">{{ rowTotalInfo.rack ? rowTotalInfo.rack : "" }}</div>
              </div>
            </el-col>

            <el-col :span="12">
              <div class="title">
                <div class="title_name">设备位置:</div>
                <div class="content">{{ rowTotalInfo.location ? rowTotalInfo.location : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">主机名:</div>
                <div class="content">{{ rowTotalInfo.host_name ? rowTotalInfo.host_name : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">网元实例名称(NFInstanceID):</div>
                <div class="content">{{ rowTotalInfo.ne_instance_name ? rowTotalInfo.ne_instance_name : "" }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">维护地址V6:</div>
                <div class="content">{{ rowTotalInfo.address_v6 ? rowTotalInfo.address_v6 : "" }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">设计容量(万):</div>
                <div class="content">{{ rowTotalInfo.design_capacity ? rowTotalInfo.design_capacity : "" }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">SBA地址(IPV6）:</div>
                <div class="content">
                  <p>{{ rowTotalInfo.address_sba ? rowTotalInfo.address_sba.split('\n')[0] : '' }}</p>
                  <p>{{ rowTotalInfo.address_sba ? rowTotalInfo.address_sba.split('\n')[1] : '' }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">N2地址:</div>
                <div class="content">{{ rowTotalInfo.address_n2 ? rowTotalInfo.address_n2 : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">N26地址:</div>
                <div class="content">{{ rowTotalInfo.address_n26 ? rowTotalInfo.address_n26 : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">S6a:</div>
                <div class="content">{{ rowTotalInfo.s6a ? rowTotalInfo.s6a : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">S11-U:</div>
                <div class="content">{{ rowTotalInfo.s11u ? rowTotalInfo.s11u : '' }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">DNS/Gn/S11-C/S10:</div>
                <div class="content">{{ rowTotalInfo.dns_gn_s11c_s10 ? rowTotalInfo.dns_gn_s11c_s10 : "" }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">SGS:</div>
                <div class="content">{{ rowTotalInfo.sgs ? rowTotalInfo.sgs : "" }}</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="title">
                <div class="title_name">Ga:</div>
                <div class="content">{{ rowTotalInfo.ga ? rowTotalInfo.ga : '' }}</div>
              </div>
            </el-col>
          </el-row>

        </div>
      </Dialog>
    </el-card>
<!--    <div class="example">-->
<!--      <div>图例：</div>-->
<!--      <div class="text"><div style="width: 50px;height: 5px;background-color: red;border-radius: 10px;"></div>100GE光</div>-->
<!--      <div class="text"><div style="width: 50px;height: 5px;background-color: yellow;border-radius: 10px;"></div>10GE光</div>-->
<!--      <div class="text"><div style="width: 50px;height: 5px;background-color: blue;border-radius: 10px;"></div>GE光</div>-->
<!--    </div>-->
  </div>

</template>

<script>
import G6 from "@antv/g6";
import fiveUroomDetail3 from "@/views/topologyFiveToc/action/fiveUroomDetail/fiveUroomDetail3";
import fiveUroomDetail1 from "@/views/topologyFiveToc/action/fiveUroomDetail/fiveUroomDetail1";
import fiveUroomDetail2 from "@/views/topologyFiveToc/action/fiveUroomDetail/fiveUroomDetail2";
import {clone, groupBy} from "@antv/util";
import fiveToc from "@/views/topologyFiveToc/forecast/fiveToc";

export default {
  components: {
    fiveUroomDetail2,
    fiveUroomDetail1,
    fiveUroomDetail3,
  },
  data() {
    return {
      Length:'',
      confirmDialog: false,
      title: "",
      //查看每行的数据
      rowTotalInfo: {},
      graph: '',
      graphData: {
        nodes: [
          // {
          //   id: "CMNET",
          //   img: require('@/assets/5GToc/yun.png'),
          //   type: 'image',
          //   size: 100,
          //   label: 'CMNET',
          //   cluster: 'part1',
          //   comboId: "comA",
          //   x: 100,
          //   y: 0,
          //   labelCfg: {
          //     position: 'center',
          //     style: {
          //       fill: "#fff",
          //       fontSize: 20
          //     }
          //   },
          //   clipCfg: {
          //     show: false,
          //     type: 'circle',
          //     opacity: 0.1,
          //     r: 15
          //   }
          // },
          // {
          //   id: "IP承载网",
          //   img: require('@/assets/5GToc/yun.png'),
          //   type: 'image',
          //   size: 100,
          //   label: 'IP承载网',
          //   cluster: 'part1',
          //    comboId: "comA",
          //   x: 300,
          //   y: 0,
          //   labelCfg: {
          //     position: 'center',
          //     style: {
          //       fill: "#fff",
          //       fontSize: 20,
          //     }
          //   },
          //
          // },
        ],
        edges: [],
        combos: [
          {
            id: "comA",
            label: "CMNET",
            type: "topology-combo",
            labelCfg: {
              position: 'center',
              refY: -20,
              style: {
                opacity: 0.5,
                fontSize: 150,
                fill: '#fff',
              },
            },
          },
          {
            id: "comB",
            label: "IP承载网",
            labelCfg: {
              position: 'center',
              style: {
                opacity: 0.5,
                fontSize: 150,
                fill: '#fff',
              },
            },
            type: "topology-combo",
          },

        ],

      },
      CityList: [],//地市
      RoomList: [],//机房
      queryForm: {
        City: '',//地市
        Room: '',//机房
        FuzzyQueries: "",//模糊查询
        page: 1,
        limit: 10,
      },
      leftList1: [],
      leftList2: [],
      leftList3: [],
      leftList4: [],
      leftList5: [],
      rightList1: [],
      rightList2: [],
      rightList3: [],
      rightList4: [],
      List1:{},
      List2:{},
      List3:{},
    }
  },
  created() {
    this.queryForm.City = this.$route.query.city
    this.queryForm.Room = this.$route.query.room
    this.queryForm.FuzzyQueries = this.$route.query.FuzzyQueries

    this.queryFivePhysicsUpf()
     this.queryFivePhysicsCity()
     this.queryFivePhysicsRoom()
  },
  mounted() {
    // this.initGraph()
  },
  watch: {},

  methods: {
    cancel() {
      this.confirmDialog = false;
    },
    async examineInfo(values) {
      // console.log('你好');
      this.title = values;
      this.confirmDialog = true;
      let data = {
        equipment_name: values,
        page: {
          currentPage: this.queryForm.page,
          pageSize: this.queryForm.limit,
        },
      };
      let res = await this.$api.topologyFiveToc.getDetail(data);
      if (res.code == 200) {
        if (res.data.dataList.length > 0) {
          this.rowTotalInfo = res.data.dataList[0];
        } else {
          this.rowTotalInfo = {}
        }

      }

    },
    handleBack() {
      this.$router.go(-1)
    },
    // 获取地市
    async queryFivePhysicsCity() {
      let data = {}
      let res = await this.$api.topologyFiveTocU.queryFivePhysicsCity(data)
      if (res.code == 200) {
        this.CityList = res.data.dataList.map((item) => {
          return {
            label: item,
            value: item,
          }
        })

      }
    },
    // 获取机房
    async queryFivePhysicsRoom() {
      let data = {
        city_name: this.queryForm.City
      }
      let res = await this.$api.topologyFiveTocU.queryFivePhysicsRoom(data)
      if (res.code == 200) {
        this.RoomList = res.data.dataList.map((item) => {
          return {
            label: item,
            value: item,
          }
        })

      }
    },
    // 关联机房
    async queryFivePhysicsRooms() {
      this.queryForm.Room = null
      let data = {
        city_name: this.queryForm.City
      }
      let res = await this.$api.topologyFiveTocU.queryFivePhysicsRoom(data)
      if (res.code == 200) {
        this.RoomList = res.data.dataList.map((item) => {
          return {
            label: item,
            value: item,
          }
        })

      }
    },
    async queryFivePhysicsUpf() {
      let that = this;
      let data = {
        city_name: this.queryForm.City,
        computer_room: this.queryForm.Room,
        // upf: this.queryForm.FuzzyQueries,
      }
      let res = await this.$api.topologyFiveTocU.queryFivePhysicsUpf(data);
      if (res.code == 200) {
        this.List1= res.data.list[0]
        this.List2= res.data.list[1]
        this.List3= res.data.list[2]
        this.Length= res.data.list.length

        // console.log(this.List1,this.List2,this.List3,'this.List1,this.List2,this.List3')
        this.leftList1 = []
        this.leftList2 = []
        this.leftList3 = []
        this.leftList4 = []
        this.leftList5 = []
        this.rightList1 = []
        this.rightList2 = []
        this.rightList3 = []
        this.rightList4 = []
        let arr = []
        let combos = []
        if(res.data.computerRooms){
          res.data.computerRooms.forEach((item) => {
            combos.push({
              id: item,
              label: item,
              type: "topology-combos",
              padding: [0,0,150,0],
              labelCfg: {

                position: 'bottom',
                refY: 140,
                style: {

                  opacity: 0.5,
                  fontSize: 50,

                  fill: 'black',
                },
              },
            })
          })
        }

        this.graphData.combos = this.graphData.combos.concat(combos);
        res.data.list[0].left.map((it) => {
          this.leftList1 = this.leftList1.concat(it)
          if (it.children) {
            it.children.map((its) => {
              if (!this.leftList2.find((t) => t.name == its.name)) {
                this.leftList2 = this.leftList2.concat(its)
                if (its.children) {
                  its.children.map((its1) => {
                    this.leftList3 = this.leftList3.concat(its1)
                    if (its1.children) {
                      its1.children.map((its2) => {
                        // console.log(its2.name, 'its2')
                        if (!this.leftList4.find((t) => t.name == its2.name)) {
                          this.leftList4 = this.leftList4.concat(its2)
                          if (its2.children) {
                            its2.children.map((its3) => {
                              if (!this.leftList5.find((t) => t == its3)) {
                                this.leftList5 = this.leftList5.concat(its3)
                              }
                            })
                          }
                        }
                      })
                    }
                  })
                }
              }
            })
          }
        })


        this.leftList4 = this.trans(this.leftList4)
        // console.log(result, 'result')
        res.data.list[0].right.map((it) => {
          this.rightList1 = this.rightList1.concat(it)
          if (it.children) {
            it.children.map((its) => {
              its.forEach((its1)=>{
                if (!this.leftList4.find((t) => t.name == its)) {
                  this.rightList2 = this.rightList2.concat(its1)
                  let data = {
                    name: its
                  }

                  this.leftList4 = this.leftList4.concat(data)
                  // if (its.children) {
                  //   its.children.map((its1) => {
                  //     // this.rightList3 = this.leftList3.concat(its1)
                  //     this.leftList4 = this.leftList4.concat(its1)
                  //   })
                  // }
                }
              })

            })
          }
        })
        this.leftList1.map((it, itindex) => {
          itindex = itindex * 260 - 200
          let data = {
            type: 'image',
            comboId: "comA",
            id: it.name,
            cluster: 'part2',
            label: it.alias,
            x: itindex,
            y: 50,
            img: require('@/assets/5GToc/cr.png'),
            size: 70,
            labelCfg: {
              position: 'bottom',
              style: {
                fontSize: 30,
                // fill: '#fff'
              }
            },
          }
          arr.push(data)
        })
        let left2length = this.leftList2.length
        let a2 = Math.trunc(left2length / 2)
        this.leftList2.map((it, itindex) => {
          itindex = itindex * 230 - a2 * 160

          let data = {
            type: 'image',
            // comboId:it.computerRoom,
            id: it.name,
            cluster: 'part2',
            label: it.alias,
            x: itindex,
            y: 300,
            // img: it.name.includes('CE') ? require('@/assets/5GToc/lyq.png') : require('@/assets/5GToc/fhq.png'),
            img:  require('@/assets/5GToc/fhq.png'),
            size: 50,
            labelCfg: {
              position: 'bottom',
              style: {
                fontSize: 25
              }
            },
          }
          arr.push(data)
        })
        let left3length = this.leftList3.length
        let a3 = Math.trunc(left3length / 2)
        this.leftList3.map((it, itindex) => {
          itindex = itindex * 230 - a3 * 160
          let data = {
            type: 'image',
            // comboId:it.computerRoom,
            id: it.name,
            cluster: 'part2',
            label: it.alias,
            x: itindex,
            y: 500,
            img: require('@/assets/5GToc/lyq.png'),
            size: 50,
            labelCfg: {
              position: 'bottom',
              style: {
                fontSize: 25
              }
            },
          }
          arr.push(data)
        })
        this.leftList4.map((it, itindex) => {
          itindex = itindex * 220 - 200
          // console.log(itindex,'itindex')
          let data = {
            type: 'image',
            comboId: it.computerRoom,
            id: it.name ? it.name : it,
            cluster: 'part2',
            label: it.name ? it.name : it,
            x: itindex,
            y: 800,
            img: require('@/assets/5GToc/upfjf.png'),
            size: 50,
            labelCfg: {
              position: 'bottom',
              style: {
                fontSize: 25
              }
            },
          }
          arr.push(data)
        })
        let left5length = this.leftList5.length
        let a5 = left5length >= 5 ? 850 : 400
        this.leftList5.map((it, itindex) => {
          itindex = itindex * a5
          let data = {
            type: 'image',
            // comboId: "comA",
            id: it,
            cluster: 'part2',
            label: it,
            x: itindex,
            y: 1100,
            img: it.includes('UPF') ? require('@/assets/5GToc/upfjf.png') : require('@/assets/5GToc/ptn.png'),
            size: 50,
            labelCfg: {
              position: 'bottom',
              style: {
                fontSize: 25
              }
            },
          }
          arr.push(data)
        })
        let left4length = this.leftList4.length
        let a = Math.trunc((left4length * 230) / 4)
        let b = a * 2 >= 1300 ? a * 2 : 1300
        this.rightList1.map((it, itindex) => {
          itindex = itindex * 240 + b
          let data = {
            type: 'image',
            comboId: "comB",
            id: it.name,
            cluster: 'part2',
            label: it.name,
            x: itindex,
            y: 50,
            img: require('@/assets/5GToc/cr.png'),
            size: 50,
            labelCfg: {
              position: 'bottom',
              style: {
                fontSize: 25,
                // fill: '#fff'
              }
            },
          }
          arr.push(data)
        })
        this.rightList2.map((it, itindex) => {
          itindex = itindex * 230 + 1300
          let data = {
            type: 'image',
            // comboId: "comA",
            id: it.name ? it.name : it,
            cluster: 'part2',
            label: it.alias ? it.alias : it,
            x: itindex,
            y: 400,
            img: require('@/assets/5GToc/lyq.png'),
            size: 50,
            labelCfg: {
              position: 'bottom',
              style: {
                fontSize: 25
              }
            },
          }
          arr.push(data)
        })
        this.graphData.nodes = this.graphData.nodes.concat(arr);
        let edges = []
        res.data.list[0].left.forEach((it) => {
          // edges.push({
          //   source: 'CMNET',
          //   target: it.name,
          // });
          it.children.forEach((its) => {
            edges.push({
              source: it.name,
              target: its.name,
              style: {
                stroke: 'red',

              }
            });
            its.children.forEach((its1) => {
              edges.push({
                source: its.name,
                target: its1.name,
                style: {
                  stroke: 'red',

                }
              });
              its1.children.forEach((its2) => {
                if (!edges.find((t) => t.source == its1.name && t.target == its2.name)) {
                  edges.push({
                    source: its1.name,
                    target: its2.name,
                    style: {
                      stroke: 'red',

                    }
                  });
                  if (its2.children) {


                    its2.children.forEach((its3) => {
                      if (!edges.find((t) => t.source == its2.name && t.target == its3)) {
                        edges.push({
                          source: its2.name,
                          target: its3,
                          style: {
                            stroke: 'red',

                          }
                        });
                      }
                    })
                  }
                }

              })
            })
          })
        })
        res.data.list[0].right.forEach((it) => {
          // console.log(it,'it')
          // it.forEach((its) => {
            it.children.forEach((its,index) => {
              // console.log(its,index,'its')

              its.forEach((its1)=>{
                edges.push({
                  source: it.name,
                  target: its1.name,
                  style: {
                    // stroke: its1.name.includes('NMS') ? 'blue' : 'yellow',
                    stroke: its1.name.includes('NMS') ? 'blue' : 'yellow',
                  }
                });
                its1.children.forEach((its2)=>{
                  edges.push({
                    source: its1.name,
                    target: its2,
                    style: {
                      stroke: its1.name.includes('NMS') ? 'blue' : 'yellow',
                    }
                  });
                })
              })
            })
        })
        this.graphData.edges = edges;
      }

      // that.initGraph();
    },
   trans (s) {
  let cache = {} // cache存储的键是eid，值是这个eid在indices数组中的下标
  let indices = [] // 数组中的每一个值是一个数组，数组中的每一个元素是原数组中相同eid的下标
  s.forEach((item, i) => {
    let computerRoom = item.computerRoom
    let index = cache[computerRoom]
    if (index !== undefined) {
      indices[index].push(i)
    } else {
      cache[computerRoom] = indices.length
      indices.push([i])
    }
  })
  /**
      * 此时，cache：{cat: 0, dog: 1, pig: 2}
      * indices: [[0, 1, 3, 5], [2, 6], [4]]
      * indices中的第1项是eid为cat的数组下标
      * indices中的第2项是eid为dog的数组下标
      * indices中的第3项是eid为pig的数组下标
      */
  let result = []
  indices.forEach(item => {
    item.forEach(index => {
      result.push(s[index]) // 依次把index对应的元素data[index]添加进去即可
    })
  })

  return result
},
    initGraph() {
      const ICON_MAP = {
        CMNET: require('@/assets/5GToc/yun.png'),
      };
      G6.registerCombo("topology-combo", {

        drawShape: function drawShape(cfg, group) {
          const r = 2;
          // console.log(group,'cfg')
          // const size = cfg.size ? cfg.size : [300, 480];
          const size = [300, 480];
          // console.log(size, 'size')
          let boxHeight = size[1] + 20;
          let boxWidth = size[0] + 20;
          const shape = group.addShape("rect", {
            attrs: {
              x: -(boxWidth / 2),
              y: -(boxHeight / 2),
              width: boxWidth / 10,
              height: boxHeight * 2,
              radius: r,
              fill: "rgba(24, 144, 255, 0.30)",
              // stroke: "rgba(24, 144, 255, 1)",
              lineWidth: 1,
              strokeOpacity: 1,
              lineDash: [3, 2]
            },
            name: "select-box",
            draggable: true,
          });
          group.addShape('image', {
            attrs: {
              x: -(boxWidth) - 150,
              y: -(boxHeight / 2),
              height: boxHeight - 100,
              width: boxWidth * 3,
              // height: 400 ,
              radius: r,
              img: ICON_MAP['CMNET'],
              cursor: 'pointer',
              opacity: 1,
            },
            // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
            name: 'image-shape',
          });

          return shape;
        },

      }, 'rect');

      G6.registerCombo("topology-combos", {

        drawShape: function drawShape(cfg, group) {
          const r = 4;
          console.log(group,'cfg')
          const size = cfg.size ? cfg.size : [300, 480];
          // const size = [300, 480];
          // console.log(size, 'size')
          let boxHeight = size[1] + 20;
          let boxWidth = size[0] + 20;
          const shape = group.addShape("rect", {
            attrs: {
              x: -(boxWidth / 2),
              y: -(boxHeight / 2),
              width: boxWidth *2,
              // height:600,
              height: boxHeight * 2,
              radius: r,
              fill: "rgba(24, 144, 255, 0.30)",
              lineWidth: 1,
              strokeOpacity: 1,
              lineDash: [3, 2]
            },
            name: "select-box",
            draggable: true,
          });
          return shape;
        },

      }, 'rect');
      let that = this
      let data = this.graphData;
      const container = document.getElementById("graph");
      const width = container.clientWidth;
      const height = container.scrollHeight * 0.80 || 400;
      const tooltip = new G6.Tooltip({
        offsetX: 70,
        offsetY: 20,
        getContent(e) {
          const outDiv = document.createElement('div')
          outDiv.style.width = '300px'
          outDiv.innerHTML = `
      <ul>
        <li>${e.item.getModel().id}</li>
<!--        <li>${e.item.getModel().id.replace(/\//g, "\n")}</li>-->
      </ul>`
          return outDiv
        },
        itemTypes: ['node']
      });
      that.graph = new G6.Graph({
        plugins: [tooltip],
        container: "graph",
        width,
        height,
        layout: {
          center: [0, -800]
        },
        fitView: true,
        style: {
          lineWidth: 5,
        },
        // defaultCombo: {
        //   // The type of the combos. You can also assign type in the data of combos
        //   type: 'topology-combo',
        //   labelCfg: {
        //     refY: 2,
        //   },
        //   // ... Other global configurations for combos
        // },
        // layout: {
        //   // type: "dagre",
        //   //  type: 'topology-combo',
        //   nodesepFunc: (d) => {
        //     if (d.id === "IP承载网") {
        //       return 100;
        //     }
        //     return 160;
        //   },
        //   ranksepFunc: (d) => {
        //     if (d.id === "CMNET") {
        //       return 5;
        //     }
        //     return 60;
        //   },
        //   // controlPoints: true,
        // },

        // defaultNode: {
        //   // type: "sql",
        // },
        defaultEdge: {
          // type: "line",
          style: {
            radius: 20,
            offset: 90,
            // endArrow: true,
            lineWidth: 3,
            stroke: "#C2C8D5",
          },
        },
        // // 节点在各状态下的样式
        // nodeStateStyles: {
        //   // hover 状态为 true 时的样式
        //   hover: {
        //     fill: "lightsteelblue"
        //   },
        //   // click 状态为 true 时的样式
        //   click: {
        //     stroke: "red",
        //     lineWidth: 3
        //   }
        // },
        // // 边在各状态下的样式
        edgeStateStyles: {
          // click 状态为 true 时的样式

          // stroke: "red",
          lineWidth: 5

        },
        modes: {
          default: ["drag-canvas", "zoom-canvas", "click-select", 'drag-node'],
        },
      });

      that.graph.on("node:click", (evt) => {
        const node = that.graph.findById(evt.item._cfg.id);
        const edges = node.getOutEdges();
        const edgess = node.getInEdges();

        edges.forEach((edge) => {
          console.log(edge, 'edge')
          that.graph.updateItem(edge, {
            style: {
              lineWidth: '8',
              // stroke: "#000",
            },
          });
        });
        edgess.forEach((edge) => {
          that.graph.updateItem(edge, {
            style: {
              lineWidth: '8',
              // stroke: "#000",
            },
          });
        });
        if (that.ids != evt.item._cfg.id && that.ids) {
          let nodes = that.graph.findById(that.ids);
          let edges1 = nodes.getOutEdges();
          edges1.forEach((edge) => {
            that.graph.updateItem(edge, {
              style: {
                lineWidth: '2',
                // stroke: "#C2C8D5",
              },
            });
          });
        }
        if (that.ids != evt.item._cfg.id && that.ids) {
          let nodes = that.graph.findById(that.ids);
          let edges1 = nodes.getInEdges();
          edges1.forEach((edge) => {
            that.graph.updateItem(edge, {
              style: {
                lineWidth: '2',
                // stroke: "#C2C8D5",
              },
            });
          });
        }
        that.ids = evt.item._cfg.id;
      });
      // 双击节点
      that.graph.on('node:dblclick', (e) => {
        const nodeItem = e.item._cfg.id // 获取被点击的节点元素对象
        console.log(nodeItem, 'nodeItem')
        if (nodeItem.includes('UPF')) {
          this.examineInfo(nodeItem)
          this.confirmDialog = true
        }
        console.log('双击', nodeItem._cfg)
      })
      that.graph.data(data);
      that.graph.render();
      if (that.queryForm.FuzzyQueries) {
        that.upScene()
      }
    }
    ,
    upScene() {
      let that = this
      const node = that.graph.findById(this.queryForm.FuzzyQueries)
      console.log(node, 'node')
      const edges = node.getEdges()
      edges.forEach((edge) => {
        that.graph.updateItem(edge, {
          style: {
            stroke: "#000",
          },
        })
      })
    }
    ,
    reset() {
      this.queryForm = {
        City: this.$route.query.city,//地市
        Room: this.$route.query.room,//机房
        FuzzyQueries: this.$route.query.FuzzyQueries,//模糊查询
      };
      const that = this
      // that.graph.destroy();
      that.graphData = this.$options.data().graphData
      this.queryFivePhysicsUpf()
      that.$refs.f1.handleSearch()
      this.$refs.f2.handleSearch()
      this.$refs.f3.handleSearch()
    }
    ,
    handleSearch() {
      const that = this
      // that.graph.destroy();
      // that.graphData = this.$options.data().graphData
      console.log(this,'this')
      that.queryFivePhysicsUpf()
      that.$refs.f1.handleSearch()
      this.$refs.f2.handleSearch()
      this.$refs.f3.handleSearch()
    }
    ,


  }
}
</script>

<style lang="scss" scoped>
.title_name {
  padding: 7px;
  width: 300px;
  font-weight: bold;
  color: #000;
  font-size: 15px;
  height: 100%;
  background-color: skyblue;

  span {
    margin-left: 15px;
  }

  // border:1px solid red;
}

.title {
  // border:1px solid  #ddd;
  .content {
    width: 700px;
    font-size: 14px;
    overflow-y: auto;
    display: flex;
    padding: 5px;
    background-color: #fff;
    color: #000;
    box-sizing: border-box;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
  }
}

.title_info {
  display: flex;
}

.system_info_list {
  // .el-form {
  padding: 10px 20px;

  box-sizing: border-box;

  .el-col {
    height: 65px;
    overflow: auto;
    border: 1px solid #ddd;
    border-radius: 2px;

    padding: 0px !important;
  }

  .title {
    // margin: 5px;
    display: flex;
    align-items: center;
    // border:1px solid red;
    box-sizing: border-box;
    height: 100%;

    p {
      margin: 5px;
    }
  }

  .title_name {
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: end;

  }
}
.example{
  width: 150px;
  height: 100px;
  background-color:#f2f2f2 ;
  position: absolute;

  bottom: 100px;
  right: 50px;
  .text{
    display: flex;
    align-items: center;
  }
}
</style>