nezha-nezha-fronted/nezha-fronted/src/components/common/project/topology.vue

<template>
  <div class="content">
    <div class="edit-topology" v-if="editVisNetwork">
      <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topology-module">
        {{$t('project.topology.module')}} :
        <span class="edit-topology-add" @click="addModelShow">{{$t('project.topology.add')}}</span>
        <!--<span class="edit-topology-remove" @click="nodeDel">Remove</span>-->
      </span>
      <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
        {{$t('project.topology.line')}} :
        <span class="edit-topology-add" @click="addLineTitleShow">{{$t('project.topology.add')}}</span>
        <!--<span class="edit-topology-remove" @click="lineDel">Remove</span>-->
      </span>
      <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
        <el-button @click="saveTopology" class="saveTopology">{{$t('project.topology.save')}}</el-button>
        <el-button @click="cancelTopology" class="cancelTopology">{{$t('project.topology.cancel')}}</el-button>
      </span>
      <span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork"> {{$t('project.topology.selTwoNode')}} <span class="edit-topologyCancel" @click="closeAddLine">{{$t('project.topology.cancel')}}</span></span>
    </div>
    <div class="edit-topology" v-else></div>
    <div class="network" ref="network"  v-clickoutside="networkPopClose" @mousedown="(e)=>{modelTopMouseDown(e)}" @mouseup="(e)=>modelTopMouseUp(e)">
      <!--拓扑图-->
      <div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
      <!--空拓扑图-->
      <div class="network-null" v-if="nodesArray.length===0">
        <i class="nz-icon nz-icon-add-node" @click="addModelShow"></i>
        <img src="./image/emptyData.png" width="303px" height="184px"/>
      </div>
      <!--拓扑图工具-->
      <div
        id="network-pop"
        class="network-pop"
        :style="{transform:'scale('+zoom+')'}"
        v-show="networkPopShow"
      >
        <i class="nz-icon nz-icon-hexagonBorder"  v-for="item in popData"  :style="{top:item.top,left:item.left}" @click="popClick(item.id)">
          <i class="nz-icon nz-icon-liubianxing"></i>
          <i :class="[item.className,{'nz-icon':item.className},'noMove']"></i>
        </i>
        <!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>-->
      </div>
      <!--拓扑图选中-->
      <div class="sel-node" id="nodeArr1" v-show="NodeArr[0]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
        <div class="sel-node-top"></div>
        <div class="sel-node-right"></div>
        <div class="sel-node-bottom"></div>
        <div class="sel-node-left"></div>
      </div>
      <div class="sel-node" id="nodeArr2" v-show="NodeArr[1]&&NodeArrShow" :style="{transform:'scale('+zoom+')'}">
        <div class="sel-node-top"></div>
        <div class="sel-node-right"></div>
        <div class="sel-node-bottom"></div>
        <div class="sel-node-left"></div>
      </div>
      <!--图谱图右侧-->
      <!--<div class="networkContent">33333</div>-->
      <!--model上的图标-->
      <i class="nz-icon nz-icon-shuidi"
         v-show="item.show"
         v-for="(item,index) in modelTop"
         :style="{top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26 + 5*(1-zoom))+'px',transform:'scale('+zoom+')'}"
         :ref="'modelTopId'+index"
         @mousedown="modelTopClick(item,index)"
      >
        <!--@mousedown="(e)=>modelTopMouseDown(item,index,e)"-->
        <!--@mouseup="modelTopMouseUp(item,index)"-->
        <i class="nz-icon nz-icon-model"></i>
      </i>
      <!--悬浮network部分-->
      <div class="network-info">
        <div  v-if="popDataShow.main">
          <popDataMain :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataMain>
        </div>
        <div v-if="popDataShow.total">
          <total-chart :moduleId="this.totalId" :projectId="this.allModuleInfo.basic.id" :nodesArray="totalArray"></total-chart>
        </div>
        <div v-if="popDataShow.info">
          <popDataInfo :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataInfo>
        </div>
      </div>
      <!--拓扑图的放大缩小-->
      <!--<div class="network-zoom">-->
        <!--<div @click='zoomChange(0.1)'><i class="nz-icon nz-icon-hexagonBorder zoom-icon"></i></div>-->
        <!--<div @click='zoomChange(-0.1)'><i class="nz-icon nz-icon-hexagonBorder zoom-icon"></i></div>-->
      <!--</div>-->

    </div>
    <transition name="right-box">
      <add-model
        v-if="addNodeShow"
        @addModel="addModel"
        :nodeData="nodeData"
        @close="closeAddNode"
        @del="nodeDel"
        :isAdd="isNodeAdd"
        :moduleDataS="moduleDataS"
        :projectName="allModuleInfo.basic"
      ></add-model>
    </transition>
    <transition name="right-box">
      <add-line
        v-if="addLineShow"
        @addLine="addLine"
        @lineDel="lineDel"
        :selectNode="NodeArr"
        :lineData="lineData"
        :isAdd="isLineAdd"
        @close="closeAddLine"
        @del="lineDel"
      ></add-line>
    </transition>
    <!--endpoint-->
    <transition name="right-box">
      <endpointTable v-if="popDataShow.endpoint"  :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" @close="popDataShowUpdate">endpoint</endpointTable>
    </transition>
    <!--asset-->
    <transition name="right-box">
      <assetTable v-if="popDataShow.asset" :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" @close="popDataShowUpdate">alert</assetTable>
    </transition>
    <!--alert-->
    <transition name="right-box">
      <alertTable v-if="popDataShow.alert" :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id" @close="popDataShowUpdate">alert</alertTable>
    </transition>
  </div>
</template>

<script>
  import Vis from 'vis'
  import addNode from './addNode'
  import addLine from './addLine'
  import popDataMain from './popData/Main'
  import popDataInfo from './popData/Info'
  import TotalChart from "./popData/totalChart";
  import alertTable from "./popData/alertTable";
  import assetTable from "./popData/assetTable";
  import endpointTable from "./popData/endpointTable";
	export default {
		name:"topology",
    components: {
      TotalChart,
      alertTable,
      assetTable,
      endpointTable,
      'add-model':addNode,
      'add-line':addLine,
      'popDataMain':popDataMain,
      'popDataInfo':popDataInfo,
    },
    props:{
      nodesArray:{
        type:Array
      },
      edgesArray:{
        type:Array
      },
      isFullScreen:{
        type:Boolean,
      },
      editVisNetwork:{
        type:Boolean,
      },
      allModuleInfo:{}
    },
    watch:{
      NodeArr(n){
        if(n.length===2){
          this.lineData={
            arrows:'0',
            label:'',
            color:'#1e90ff',
            lineId:'',
            width:'1',
            dashes:false,
            id:'',
          };
          this.addLineShow=true;
          this.selectNodeTitle=false;
          this.isLineAdd=true;
        }
       this.selNodeArrUpdate()
      },
      editVisNetwork(n){
        if(!n){
          this.NodeArr=[];
          this.selNodeId='';
          this.selectNodeTitle=false;
        }
      },
      allModuleInfo:{
        immediate: true,
        deep: true,
        handler(n){
          this.allModuleInfos={...n};
          this.arrayDiff();
        },
      },
      // nodesArray:{
      //   immediate: true,
      //   deep: true,
      //   handler(n){
      //    this.setNetworkData(n,this.edgesArray);
      //   },
      // },
    },
    data(){
		  return {
        totalId:'',
        totalArray:[],
        allModuleInfos:[],
        relativeModelTop:{},
        moduleDataS:[],
        index:'',
        zoom:1,
        domScale:1,
        selectNodeTitle:false,
        // 拓扑图工具
        networkPopTop:0,
        networkPopLeft:0,
        networkPopShow:false,
        addNodeShow:false,
        addLineShow:false,
        NodeArrShow:false,
        cursorMove:false,
        NodeArr:[],
        selNodeId:'',
        lineData:{
          arrows:'',
          label:'',
          color:'#1e90ff',
          lineId:'',
          id:'',
          dashes:[],
        },
        hoverEdge:false,
        isLineAdd:true,
        isNodeAdd:true,
        nodeData:{
          modelId:'',
          label:'',
          x:'',
          y:'',
          image:'',
        },
        popData:[
          {top:'-20px', left:'-17px',className:'nz-icon-endpoint',id:'endpoint'},
          {top:'-20px', left:'28px',className:'nz-icon-shujuku',id:'asset'},
          {top:'18px',  left:'52px',className:'nz-icon-chart',id:'total'},
          {top:'56px', left:'28px',className:'',id:'other'},
          {top:'56px', left:'-17px',className:'nz-icon-info-normal',id:'info'},
          {top:'18px', left:'-38px',className:'nz-icon-gaojing',id:'alert'},
        ],
        popDataShow:{
          endpoint:false,
          asset:false,
          total:false,
          other:false,
          info:false,
          alert:false,
          main:false,
        },
        modelTop:[],
        //viewsCenter
        viewsCenter:{
          x:0,y:0
        },
        // 拓扑图数据
        nodes:[],
        edges:[],
        // network:null,
        container:null,
        options:{},
        data:{}
      }
    },
    methods:{// 保存拓扑图数据
      saveTopology(){
        let nodes=this.formatNodes([...this.nodesArray]);
        let edges=this.formatEdges([...this.edgesArray]);
        this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges,viewsCenter:this.viewsCenter,zoom:this.zoom}),projectId:this.allModuleInfo.basic.id}).then(res=>{
          if(res.code===200){
            this.$message({
              message: this.$t("tip.saveSuccess"),
              type: 'success'
            });
          }
        }).catch(res=>{
          this.$message({
            message: res.msg,
            type: 'error'
          });
        });
        // this.$put('/project/topo',{topo:'{}',projectId:this.allModuleInfo.basic.id});
        this.$emit('editVisNetworkChange',false);
      },
      cancelTopology(){
        this.$emit('reload');
      },
      formatNodes(arr){
        let arr1=[];
        arr.forEach(item=>{
          let obj={
            "x": item.x,
            "y": item.y,
            "moduleId": item.moduleId,
            "label":item.label,
            "iconId": item.iconId,
            "expressions": item.expressions
          };
          arr1.push(obj)
        });
        return arr1
      },
      formatEdges(arr){
        let arr1=[];
        arr.forEach(item=>{
          let obj={
            "name": item.label,
            "width": item.width,
            "arrows": item.arrows,
            "color": item.color,
            "source": item.from,
            "target": item.to,
            "smooth": item.smooth,
            "expressions": item.expressions,
            "dashes":item.dashes,
          };
          arr1.push(obj)
        });
        return arr1
      },
      //拓扑图方法
      init(){
        let this_ = this;
        this_.nodes = new Vis.DataSet(this_.nodesArray);
        this_.edges = new Vis.DataSet(this_.edgesArray);
        this_.container = this.$refs.visNetwork;
        this_.networkPop = document.getElementById('network-pop');
        this_.data = {
          nodes: this_.nodes,
          edges: this_.edges
        };
        this_.options = {
          autoResize: true,
          clickToUse:true,
          groups:{
            useDefaultGroups: true,
            myGroupId:{
              /*node options*/
            }
          },
          nodes: {
            shape: 'dot',
            size: 40,
            borderWidth: 2,
            font:{
              size:16,
            },
          },

          edges: {
            width: 2,
            smooth:{  //设置两个节点之前的连线的状态
              enabled: false,//默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
              roundness:0.5,
              type: "curvedCW",
            },
            font:{
              align:'bottom',
              vadjust:10,
            },
            selfReferenceSize:40,
            arrowStrikethrough:false,
            chosen:{
              edge:(values, id, selected, hovering)=>{
                if(this_.hoverEdge){
                  values.middleArrow=true;
                  values.middleArrowScale=1;
                  values.middleArrowType='circle';
                }
              },
            },
          },
          layout:{
            randomSeed: 666,
          },
          physics: { //计算节点之前斥力，进行自动排列的属性
            enabled: false, //默认是true，设置为false后，节点将不会自动改变，拖动谁谁动。不影响其他的节点
            barnesHut: {
              gravitationalConstant: -4000,
              centralGravity: 0.3,
              springLength: 120,
              springConstant: 0.04,
              damping: 0.09,
              avoidOverlap: 0
            }
          },

          interaction:{
            dragNodes: true, //是否能拖动节点
            dragView: true, //是否能拖动画布
            hover: true, //鼠标移过后加粗该节点和连接线
            multiselect: false, //按 ctrl 多选
            selectable: true, //是否可以点击选择
            selectConnectedEdges: false, //选择节点后是否显示连接线
            hoverConnectedEdges: true, //鼠标滑动节点后是否显示连接线
            zoomView: true, //是否能缩放画布
            navigationButtons:true,
          },

          manipulation: {  //该属性表示可以编辑，出现编辑操作按钮
            enabled: false,
          },
        };
        this_.network = new Vis.Network(this_.container, this_.data, this_.options);
        this_.network.moveTo({
          position: this_.viewsCenter,
          scale: this_.zoom,
          offset: {x:0, y:0},
        });
        this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
        this_.modelTopUpdate();
      },
      resetAllNodes() {
        this.setNetworkData(this.nodesArray,this.edgesArray);
      },
      resetAllNodesStabilize() {
        let this_ = this;
        this_.resetAllNodes();
        this_.network.stabilize();
      },
      setData(){
        this.setNetworkData(this.nodesArray,this.edgesArray);
      },
      setNetworkData(nodes,edges){//动态设置拓扑图数据
        let this_ = this;
        this.nodes = new Vis.DataSet(nodes);
        this.edges = new Vis.DataSet(edges);
        this.network.setData({
          nodes:this_.nodes,
          edges: this_.edges
        });
        this_.network.moveTo({
          position: this_.viewsCenter,
          scale: this_.zoom,
          offset: {x:0, y:0},
        });
        this.$nextTick(()=>{
          this_.modelTopUpdate();
          this_.arrayDiff();
          this_.popDataShowUpdate();
        })
      },
      addModel(model){ // 添加model
        this.addNodeShow=false;
        if(!model){return}
        let nodesArray=[...this.nodesArray];
        if(!this.isNodeAdd){
          model={...nodesArray.find(item=>item.id===model.id),...model};
          nodesArray=nodesArray.filter(item=>item.id!==model.id);
        }else{
          model={...model,...this.network.DOMtoCanvas({x:80,y:100})};
        }
        nodesArray.push(model);
        this.$emit("setTopologyData",nodesArray,this.edgesArray);
        this.setNetworkData(nodesArray,this.edgesArray);
        this.$nextTick(()=>{
          this.arrayDiff();
          this.$emit('editVisNetworkChange',true);
        })
      },
      addModelShow(){ // 显示添加节点弹窗
        this.addNodeShow=true;
        this.isNodeAdd=true;
        this.nodeData={
          modelId:'',
          label:'',
          x:'',
          y:'',
          image:'',
          id:'',
        }
      },
      addLine(edges){ // 添加或者編輯line
        this.addLineShow=false;
        if(!edges){return}
        let edgesArray =[...this.edgesArray];
       if(!this.isLineAdd){
         edges={...edgesArray.find(item=>item.id===edges.id),...edges};
         edgesArray=edgesArray.filter(item=>item.id!==edges.id);
       }else{
         edges.from=this.NodeArr[0];
         edges.to=this.NodeArr[1];
       }
       edgesArray.push(edges);
        this.$emit("setTopologyData",this.nodesArray,edgesArray);
        this.setNetworkData(this.nodesArray,edgesArray);
        this.NodeArr=[];
        this.NodeArrShow=false;
      },
      addLineTitleShow(){ // 显示添加线弹窗
        // this.addLineShow=true;
        this.selectNodeTitle=true;
        this.NodeArrShow=true;
      },
      closeAddLine(){
        this.selectNodeTitle=false;
        this.addLineShow=false;
        this.NodeArr=[];
        this.NodeArrShow=false;
        this.network.unselectAll();
      },
      closeAddNode(){
        this.addNodeShow=false;
        this.arrayDiff();
      },
      setNodePosition(selId){ // 移动节点后 设置节点坐标
        let position = this.network.getPositions([selId]);
        let selItem = this.nodesArray.find((item)=>item.id===selId);
        this.nodeData = selItem;
        selItem.x=position[selId].x;
        selItem.y=position[selId].y;
        this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
      },
      setPopPosition(selId){//设置节点工具栏位置以及是否显示
        if(!selId){return}
        let position=this.network.canvasToDOM(this.network.getPositions([selId])[selId]);
        this.networkPop.style.top = position.y - 85 + 7*(10-this.zoom*10)+'px';
        this.networkPop.style.left = position.x - 32*this.zoom - 5*(1-this.zoom) +'px';
        if(!this.isFullScreen&&this.NodeArr.length===0&&!this.editVisNetwork){
          this.networkPopShow=true;
        }
        this.NodeArr=[...this.NodeArr]
      },
      networkPopClose(){//关闭节点工具栏
        this.networkPopShow=false;
        // this.selNodeId=''
        if(this.network){
          this.network.unselectAll();
        }
      },
      //工具栏
      nodeDel(){
        let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
        let edgesArray=this.edgesArray.filter((item)=>!(item.from===this.selNodeId || item.to===this.selNodeId));
        this.selNodeId='';
        this.$emit('setTopologyData',nodesArray, edgesArray);
        this.setNetworkData(nodesArray, edgesArray);
        this.networkPopClose();
        this.arrayDiff();
      },
      nodeEdit(){
        this.moduleDataS.module.push(this.allModuleInfos.module.find(item=>item.id===this.selNodeId));
        this.addNodeShow=true;
        this.isNodeAdd=false;
      },
      lineDel(){
        if(!this.lineData.id){return}
        let edgesArray=this.edgesArray.filter((item)=>item.id!==this.lineData.id);
        this.$emit('setTopologyData',this.nodesArray, edgesArray);
        this.setNetworkData(this.nodesArray,edgesArray);
      },

      // 工具的点击 对应的操作
      popClick(id){
        this.lineData='';
        this.popDataShowUpdate(id);
      },
      modelTopUpdate(){//model上的图标 实时更新
        this.modelTop=[];
        this.nodesArray.forEach((item)=>{
          let position=this.network.canvasToDOM({x:item.x,y:item.y});
          this.modelTop.push({
            show:true,
            x:position.x,
            y:position.y,
            id:item.id,
          })
        })
      },
      selNodeArrUpdate(){// 选中框位置更新
        this.NodeArr.forEach((id,index)=>{
          let selNode = this.nodesArray.find(item=>item.id===id);
          let position=this.network.canvasToDOM({x:selNode.x,y:selNode.y});
          document.getElementById('nodeArr'+(index+1)).style.top=position.y+'px';
          document.getElementById('nodeArr'+(index+1)).style.left=position.x+'px';
        })
      },
      modelTopMouseDown(e){
        if(!this.index&&this.index!==0){return}
        this.relativeModelTop={
          x:e.clientX-(parseFloat(this.$refs['modelTopId'+this.index][0].style.left)),
          y:e.clientY-(parseFloat(this.$refs['modelTopId'+this.index][0].style.top)),
        };
        this.$refs['network'].addEventListener('mousemove',this.modelTopMouseMove);
      },
      modelTopMouseUp(){
        this.index='';
        this.relativeModelTop={};
        this.$refs['network'].removeEventListener('mousemove',this.modelTopMouseMove);
      },
      modelTopMouseMove(e){
        let position={
          x:e.clientX-this.relativeModelTop.x,
          y:e.clientY-this.relativeModelTop.y
        };
        this.$refs['modelTopId'+this.index][0].style.top=position.y+'px';
        this.$refs['modelTopId'+this.index][0].style.left=position.x+'px';
        // {top:(item.y- 80 + 5*(10-zoom*10))+'px',left:(item.x-26)+'px'
        let cancvs=this.network.DOMtoCanvas({
          x:position.x+26-5*(1-this.zoom),
          y:position.y+80-(50*(1-this.zoom)),
        });
        this.network.moveNode(this.selNodeId,cancvs.x,cancvs.y);
        let selItem = this.nodesArray.find((item)=>item.id===this.selNodeId);
        selItem.x=cancvs.x;
        selItem.y=cancvs.y;
        this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
        if(this.networkPopShow){
          this.setPopPosition(this.selNodeId);
        }
      },
      modelTopClick(item,index){
        this.index=index;
        this.selNodeId=item.id;
        if(this.selNodeId){
          this.setPopPosition(this.selNodeId);
          this.popDataShowUpdate('main')
        }
      },
      // 数组取差集
      arrayDiff(){
        // this.moduleDataS=this.allModuleInfos-this.nodesArray
        this.moduleDataS={...this.allModuleInfos};
        this.nodesArray.forEach((item)=>{
          this.moduleDataS.module=this.moduleDataS.module.filter((item1)=> item.id!==item1.id)
        })
      },
      //工具栏点击后显示对应内容
      popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
        this.popDataShow={
          endpoint:false,
          asset:false,
          total:false,
          other:false,
          info:false,
          alert:false,
          main:false,
        };
        if(key&&!this.editVisNetwork){
          if(key==='total'&&this.selNodeId){
            this.totalId=this.selNodeId;
            this.totalArray=this.nodesArray;
          }
          if(key==='total'&&this.lineData){
            this.totalId=this.lineData.id;
            this.totalArray=this.edgesArray;
          }
          this.$nextTick(()=>{
            this.popDataShow[key]=true;
          })
        }
        if(this.selNodeId&&!flag){
          this.setPopPosition(this.selNodeId);
        }
      },
      //拓扑图放大缩小
      zoomChange(num){
        this.zoom+=num;
        if(this.zoom<0){//每次缩小0.1 保证缩放大于0
          this.zoom=0.01;
        }
        this.network.moveTo({
          position: this.viewsCenter,
          scale: this.zoom,
          offset: {x:0, y:0},
        });
        this.$nextTick(()=>{
          this.modelTopUpdate();
          this.setPopPosition(this.selNodeId);
          this.popDataShowUpdate();
        })
      }
    },
    mounted(){
       setTimeout(()=>{
         let this_=this;
         this.init('modal');
         this.network.on("click", function (params) {
           this_.networkPopClose();
           if(!params.edges.length&&!params.nodes.length){
             this_.popDataShowUpdate('',true);
           }
         });

         this.network.on("selectNode", function (params) { //选择节点
           let selId=params.nodes[0];
           if(selId){
             this_.selNodeId=selId;
             this_.cursorMove=true;
             this_.nodeData=this_.nodesArray.find((item)=>item.id===selId);
             if(this_.NodeArr.indexOf(selId)!==-1){
               let index = this_.NodeArr.indexOf(selId);
               this_.NodeArr=this_.NodeArr.filter((item,i)=> i !== index);
               return
             }
             if(this_.selectNodeTitle&&this_.NodeArrShow){
               this_.NodeArr.push(selId);
               this_.network.selectNodes(this_.NodeArr,true);
               return
             }
             if(this_.NodeArr.length===0&&this_.editVisNetwork){
               this_.nodeEdit();
             }
             this_.setPopPosition(selId,params);
             this_.popDataShowUpdate('main');
           }
         });

         this.network.on("selectEdge", function (params) { // 选择边
           this_.selNodeId='';
           this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
          if(this_.editVisNetwork){
            this_.lineData.color=this_.lineData.color.color?this_.lineData.color.color:this_.lineData.color;
            this_.addLineShow=true;
            this_.isLineAdd=false;
          }
          if(!this_.editVisNetwork){
            if(this_.lineData.expressions&&this_.lineData.expressions.length){
              this_.popDataShowUpdate('total')
            }else{
              this_.popDataShowUpdate()
            }
          }
           // this_.lineData.color=this_.lineData.color.color;
           // this_.addLineShow=true;
         });

         this.network.on("hoverEdge", function () { // 悬停边
           this_.hoverEdge=true;
         });

         this.network.on("blurEdge", function () { // 边失去焦点
           this_.hoverEdge=false;
         });

         this.network.on("dragStart", function (params) {//节点移动开始
           this_.NodeArrShow=false;
           let selId=params.nodes[0];
           if(selId){
             this_.selNodeId=selId
           }
           // if(!selId){
           //   this_.modelTop.forEach(item=>{
           //     item.show=false;
           //   })
           // }
         });

         this.network.on("dragging", function () {//节点移动中
           this_.viewsCenter=this_.network.getViewPosition();
           // let selId=params.nodes[0];
           if(this_.selNodeId){
             this_.setNodePosition(this_.selNodeId)
           }
           if(this_.selNodeId&&this_.networkPopShow){
             this_.setPopPosition(this_.selNodeId);
           }
           if(this_.NodeArr.length>0){
             this_.NodeArrShow=true;
           }
           this_.modelTopUpdate();
           this_.selNodeArrUpdate();
         });

         this.network.on("dragEnd", function () {//节点移动结束
           this_.viewsCenter=this_.network.getViewPosition();
           if(this_.selNodeId){
             this_.setNodePosition(this_.selNodeId)
           }
           if(this_.selNodeId&&this_.networkPopShow){
             this_.setPopPosition(this_.selNodeId);
           }
           if(this_.NodeArr.length>0){
             this_.NodeArrShow=true;
           }
           this_.modelTopUpdate();
           this_.selNodeArrUpdate();
         });

         this.network.on("hoverNode", function () {//hoverNode
           this_.cursorMove=true;
         });

         this.network.on("blurNode", function () {//blurNode
           this_.cursorMove=false;
         });
         this.network.on("hoverEdge", function () {//hoverNode
           this_.cursorMove=true;
         });

         this.network.on("blurEdge", function () {//blurNode
           this_.cursorMove=false;
         });

         this.network.on("zoom", function (params) {//检测缩放
           this_.zoom=params.scale;
           this_.modelTopUpdate();
           this_.selNodeArrUpdate();
           if(this_.networkPopShow){
             this_.setPopPosition(this_.selNodeId);
           }
           return false
         });
         this.network.on("resize", function (params,a) {//检测resize

           setTimeout(()=>{
             this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
             this_.modelTopUpdate();
             this_.selNodeArrUpdate();
             if(this_.networkPopShow){
               this_.setPopPosition(this_.selNodeId);
             }
           });
           return false
         });
       })
    }
	}
</script>

<style scoped>
  .content{
    height: 100%;
  }
  .edit-topology{
    width: 100%;
    height: 28px;
  }
  .network{
    display: flex;
    height: calc(100% - 30px);
    position: relative;
    overflow: hidden;
  }
  .network-pop{
    position: absolute;
    z-index: 10;
    /*border: 1px solid #e6e6e6;*/
    border-radius: 5px;
    height: 32px;
    /*background: #fff;*/
    padding: 0 3px;
    line-height: 32px;

  }
  .network-pop .nz-icon-hexagonBorder{
    position: absolute;
    font-size: 48px;
    color: #84d5c2;
  }
  .network-pop  .nz-icon-liubianxing{
    color:#e2f3ef;
    font-size: 44px;
    position: absolute;
    top: 0;
    left: 2px;
  }
  .nz-icon.noMove{
    position: absolute;
    top: 0;
    left: 14px;
    font-size: 20px;
    color: #27c09c;
  }
  .network-pop .nz-icon-hexagonBorder:hover{
    transform: scale(1.2);
  }
  .network-pop .nz-icon-hexagonBorder:hover .nz-icon-liubianxing{
    transform: scale(1.1);
    left: 4px;
    font-size: 41px;
    color: #D7FAF1;
    top: -1px;
  }
  .network-pop .nz-icon-hexagonBorder:hover .noMove{
    transform: scale(1.1);
  }
  /*.btmTriangle{*/
    /*position: absolute;*/
    /*width: 0;*/
    /*height: 0;*/
    /*border-width: 10px;*/
    /*border-style: solid;*/
    /*border-color:#e6e6e6 transparent transparent transparent;*/
    /*bottom: -20px;*/
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
  /*}*/
  /*.btmTriangle:after{*/
    /*content: '';*/
    /*display:block;*/
    /*width:0;*/
    /*height:0;*/
    /*border-width: 10px;*/
    /*border-style:solid;*/
    /*border-color:#fff transparent  transparent transparent;*/
    /*position:absolute;*/
    /*bottom: -7px;*/
    /*left: -9px;*/
  /*}*/
  #network_id,.network-null{
    width: 100%;
    height: 100%;
  }
  .network-null{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
  }
  .network-null .nz-icon-add-node{
    color: #23BF9A;
    font-size: 50px;
    margin-bottom: 24px;
    cursor: pointer;
  }
  .cursorMove{
    cursor: move;
  }
  #network_id2{
    height: 100%;
  }
  .networkContent{
    width: 40%;
  }
  .nz-icon-delete{
    cursor: pointer;
    color: #ee6723;
    margin-left: 10px;
  }
  .nz-icon-edit{
    font-size: 14px;
    cursor: pointer;
  }
  .edit-topology{
    color: #1a1a1a;
    font-size: 18px;
    font-weight: bold;
    height: 28px;
  }
  .edit-topology-module,.edit-topology-line-cancel{
    margin-left: 30px;
  }
  .edit-topologyLine{
    margin-left: 60px;
  }
  .edit-topology-add,.edit-topology-remove,.edit-topologyCancel{
    color: #1989fa;
    margin-left: 30px;
    cursor: pointer;
  }
  .sel-node{
    position: absolute;
    width: 0;
    height: 0;
  }
  .sel-node-top {
    width: 120px;
    height: 0;
    border-top: 4px dashed #FF8C0A;
    position: absolute;
    left: -60px;
    top: -60px;
  }
  .sel-node-right {
    width: 0;
    height: 120px;
    border-right: 4px dashed #FF8C0A;
    position: absolute;
    left: 60px;
    top: -60px;
  }
  .sel-node-bottom {
    width: 120px;
    height: 0;
    border-bottom: 4px dashed #FF8C0A;
    position: absolute;
    left: -60px;
    top: 60px;
  }
  .sel-node-left {
    width: 0;
    height: 120px;
    border-left: 4px dashed #FF8C0A;
    position: absolute;
    left: -60px;
    top: -60px;
  }
  .nz-icon-shuidi{
    position: absolute;
    font-size: 48px;
    color: rgba(190,233,222,0.45);
    border-radius: 50%;
    height: 60px;
    width: 38px;
  }
  .nz-icon-model{
    color: #23BF9A;
    position: absolute;
    top: 17px;
    left: 15px;
    font-size: 18px;
  }
  .network-info{
    position: absolute;
    right: 0;
    top: 0;
  }
  .saveTopology{
    background-image: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%);
    border-radius: 4px;
    font-size: 14px;
    color: #FFFFFF;
    padding: 4px 14px;
  }
  .cancelTopology{
    background-image: linear-gradient(180deg, #F0F0F0 0%, #D8D8D8 99%);
    border-radius: 4px;
    font-size: 14px;
    color: #333333;
    padding: 4px 14px;
  }
  .network-zoom{
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
  .zoom-icon{
    font-size: 42px;
  }
</style>