抽离组件

nezha-fronted/src/components/charts/addLine.vue

@@ -1,5 +1,21 @@
 <template>
-  <el-form ref="form" :model="form" label-width="80px" :rules="rules">
+  <div class="right-box right-box-edit-endpoint">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns">
+      <button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
+        <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{$t("project.endpoint.editEndpoint") + "  ID：" + lineData.id}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
         <el-form-item label="Id">
           <el-input v-model="form.lineId"></el-input>
         </el-form-item>
@@ -24,12 +40,41 @@
           <el-button>取消</el-button>
         </el-form-item>
       </el-form>
+    </el-scrollbar>
+
+    <!-- end--表单-->
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
   export default {
     name:"addLine",
     props:{
+      lineData:{},
+    },
+    watch:{
+      lineData:{
+        handler(n){
+          this.form={
+            arrows:n.arrows,
+            label:n.label,
+            color:n.color,
+            lineId:n.id,
+          }
+        },
+        immediate: true,
+        deep: true,
+      }
     },
     data(){
       return{
@@ -47,7 +92,6 @@
           '#00ced1',
           '#1e90ff',
           '#c71585',
-          '#c71585'
         ],
         rules:{
           arrows: [
@@ -58,15 +102,205 @@
     },
     methods:{
       onSubmit(){
-        // {id: 0,from: 2, to: 1,label:"hahah",arrows:'from;to', color: {color:'red',highlight:'red',hover:'red',opacity:1.0},},
         let model=Object.assign({id:this.form.lineId},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
         this.$emit('addLine',model)
       },
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      del(){
+        this.$emit('del');
+        this.esc();
+      }
     },
 
   }
 </script>
 
 <style scoped>
+  .nz-btn-edit-ok{
+    position: absolute;
+    bottom: 0;
+    right:0;
+  }
+  .nz-btn-edit-esc{
+    position: absolute;
+    bottom: 0;
+    left:0;
+  }
 
+  /* begin--搜索框*/
+  .endpoint-asset-search {
+    display: inline-block;
+    position: relative;
+    margin-top: -16px;
+  }
+  .endpoint-asset-search button {
+    height: 22px !important;
+  }
+  .endpoint-asset-search-dropdown {
+    position: absolute;
+    top: 25px;
+    background-color: #444;
+    border-radius: 4px;
+    width: 44px;
+    left: 0;
+  }
+  .endpoint-asset-search-dropdown-item {
+    text-align: center;
+    line-height: 22px;
+    height: 22px;
+    cursor: default;
+    color: white;
+    font-size: 12px;
+  }
+  .endpoint-asset-label-txt {
+    display: inline-block;
+    width: 19px;
+    text-align: center;
+  }
+  .endpoint-asset-search-dropdown-item:first-of-type {
+    border-radius: 4px 4px 0 0;
+  }
+  .endpoint-asset-search-dropdown-item:last-of-type {
+    border-radius: 0 0 4px 4px;
+  }
+  .endpoint-asset-search-dropdown-item:hover {
+    background-color: #222;
+    color: #ff9900;
+  }
+  .endpoint-asset-search-input {
+    display: inline-block;
+    width: 150px;
+    vertical-align: top;
+  }
+  /* end--搜索框*/
+
+  /* begin--table*/
+  .endpoint-sub-table {
+    padding-top: 30px;
+    height: 440px;
+  }
+  .line-100 {
+    margin-bottom: 3px;
+  }
+  .endpoint-sub-table-head {
+    line-height: 28px;
+    height: 30px;
+  }
+  .endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
+    line-height: 28px;
+    height: 30px;
+    color: #656565;
+  }
+  .endpoint-sub-table-row:hover {
+    background-color: #dadada;
+    cursor: default;
+  }
+  .endpoint-sub-table-row-active {
+    background-color: #dadada;
+  }
+  .endpoint-sub-table-row-selected {
+    background-color: #656565;
+    color: white;
+  }
+  .endpoint-sub-table-col {
+    display: inline-block;
+    width: calc(50% - 15px);
+    padding-left: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .endpoint-sub-table-paginate-all {
+    position: absolute;
+    left: 10px;
+    bottom: 17px;
+    color: #5a5a5a;
+  }
+  .endpoint-sub-table-body {
+    font-size: 15px;
+    position: relative;
+    overflow: auto;
+    height: calc(100% - 34px);
+  }
+  .endpoint-sub-table-body-dialog {
+    width: 100%;
+    height: 100%;
+    background-color: #e9ebec;
+    position: absolute;
+    opacity: 0.2;
+  }
+  .endpoints-clear-btn {
+    margin: 6px 0 0 7px;
+  }
+  /* end--table*/
 </style>
+
+<style lang="scss">
+  .right-box-edit-endpoint .el-pagination__total {
+    float: left;
+  }
+  right-box-edit-endpoint .pagination {
+    padding-top: 12px;
+    text-align: center;
+  }
+
+  .endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
+    font-size: 13px;
+    min-width: 20px !important;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    text-align: center;
+    border: 1px solid rgba(154,154,154,0.20);
+    border-radius: 2px;
+    border-radius: 2px;
+  }
+  .endpoint-sub-table-paginate  .el-pagination.is-background .el-pager li:not(.disabled).active {
+    color: white !important;
+  }
+  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
+    color: #666;
+  }
+  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
+    line-height: 20px;
+  }
+  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
+    line-height: 20px;
+  }
+  .right-box-edit-endpoint .el-pager li.number{
+    font-family: NotoSansSC-Regular;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .right-box-edit-endpoint .el-pager li.number.active{
+    font-family: NotoSansSC-Regular;
+    color: #FFFFFF;
+    letter-spacing: 0;
+  }
+
+  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: $global-text-color-active;
+    border-radius: 2px;
+    border-radius: 2px;
+  }
+  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
+    font-family: NotoSansSC-Regular;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
+    height: 20px;
+    border-color: rgba(154,154,154,0.20);
+  }
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
+    border-color: rgba(154,154,154,0.20);
+  }
+</style>
+

nezha-fronted/src/components/charts/addNode.vue

@@ -1,25 +1,48 @@
 <template>
-  <el-form ref="form" :model="form" label-width="80px">
+  <div class="right-box right-box-edit-endpoint" v-clickoutside="clickOutside">
+    <!-- begin--顶部按钮-->
+    <div class="right-box-top-btns">
+      <button id="edit-ep-del" type="button" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light ">
+        <span class="right-box-top-btn-icon"><i class="el-icon-delete"></i></span>
+        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+      </button>
+    </div>
+    <!-- end--顶部按钮-->
+
+    <!-- begin--标题-->
+    <div class="right-box-title">{{$t("project.endpoint.editEndpoint") + "  ID：" + nodeData.id}}</div>
+    <!-- end--标题-->
+
+    <!-- begin--表单-->
+    <el-scrollbar class="right-box-form-box">
+      <el-form ref="form" :model="form" label-width="120px">
         <el-form-item label="Id">
           <el-input v-model="form.modelId"></el-input>
         </el-form-item>
+
         <el-form-item label="Label">
           <el-input v-model="form.label"></el-input>
         </el-form-item>
-    <el-form-item label="x">
+
-      <el-input v-model="form.x"></el-input>
-    </el-form-item>
-    <el-form-item label="y">
-      <el-input v-model="form.y"></el-input>
-    </el-form-item>
         <el-form-item label="image">
           <el-input v-model="form.image"></el-input>
         </el-form-item>
-    <el-form-item>
+
-      <el-button type="primary" @click="onSubmit">提交</el-button>
-      <el-button>取消</el-button>
-    </el-form-item>
       </el-form>
+    </el-scrollbar>
+
+    <!-- end--表单-->
+
+    <!--底部按钮-->
+    <div class="right-box-bottom-btns">
+      <button @click="esc" id="ep-edit-esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-min-width-100">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button @click="onSubmit" id="ep-edit-save" class="nz-btn nz-btn-size-normal nz-btn-style-normal nz-btn-min-width-100">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -29,11 +52,15 @@
       nodeData:{}
     },
     watch:{
-      nodeData(n){
+      nodeData:{
+        handler(n){
          for(let key in this.form){
            this.form[key]=n[key]
          }
          this.form.modelId=n.id;
+       },
+       immediate: true,
+       deep: true,
       }
     },
     data(){
@@ -41,8 +68,6 @@
         form:{
           modelId:'',
           label:'',
-          x:'',
-          y:'',
           image:'',
         }
       }
@@ -52,11 +77,201 @@
         let model=Object.assign({id:this.form.modelId,shape:'image',shapeProperties:{useImageSize:false}},{...this.form});
         this.$emit('addModel',model)
       },
+      /*关闭弹框*/
+      esc(refresh) {
+        this.$emit("close", refresh);
+      },
+      clickOutside() {
+        this.esc(false);
+      },
+      del(){
+        this.$emit('del');
+        this.esc();
+      }
     },
 
 	}
 </script>
 
 <style scoped>
+  .nz-btn-edit-ok{
+    position: absolute;
+    bottom: 0;
+    right:0;
+  }
+  .nz-btn-edit-esc{
+    position: absolute;
+    bottom: 0;
+    left:0;
+  }
 
+  /* begin--搜索框*/
+  .endpoint-asset-search {
+    display: inline-block;
+    position: relative;
+    margin-top: -16px;
+  }
+  .endpoint-asset-search button {
+    height: 22px !important;
+  }
+  .endpoint-asset-search-dropdown {
+    position: absolute;
+    top: 25px;
+    background-color: #444;
+    border-radius: 4px;
+    width: 44px;
+    left: 0;
+  }
+  .endpoint-asset-search-dropdown-item {
+    text-align: center;
+    line-height: 22px;
+    height: 22px;
+    cursor: default;
+    color: white;
+    font-size: 12px;
+  }
+  .endpoint-asset-label-txt {
+    display: inline-block;
+    width: 19px;
+    text-align: center;
+  }
+  .endpoint-asset-search-dropdown-item:first-of-type {
+    border-radius: 4px 4px 0 0;
+  }
+  .endpoint-asset-search-dropdown-item:last-of-type {
+    border-radius: 0 0 4px 4px;
+  }
+  .endpoint-asset-search-dropdown-item:hover {
+    background-color: #222;
+    color: #ff9900;
+  }
+  .endpoint-asset-search-input {
+    display: inline-block;
+    width: 150px;
+    vertical-align: top;
+  }
+  /* end--搜索框*/
+
+  /* begin--table*/
+  .endpoint-sub-table {
+    padding-top: 30px;
+    height: 440px;
+  }
+  .line-100 {
+    margin-bottom: 3px;
+  }
+  .endpoint-sub-table-head {
+    line-height: 28px;
+    height: 30px;
+  }
+  .endpoint-sub-table-row, .endpoint-sub-table-row-disabled {
+    line-height: 28px;
+    height: 30px;
+    color: #656565;
+  }
+  .endpoint-sub-table-row:hover {
+    background-color: #dadada;
+    cursor: default;
+  }
+  .endpoint-sub-table-row-active {
+    background-color: #dadada;
+  }
+  .endpoint-sub-table-row-selected {
+    background-color: #656565;
+    color: white;
+  }
+  .endpoint-sub-table-col {
+    display: inline-block;
+    width: calc(50% - 15px);
+    padding-left: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .endpoint-sub-table-paginate-all {
+    position: absolute;
+    left: 10px;
+    bottom: 17px;
+    color: #5a5a5a;
+  }
+  .endpoint-sub-table-body {
+    font-size: 15px;
+    position: relative;
+    overflow: auto;
+    height: calc(100% - 34px);
+  }
+  .endpoint-sub-table-body-dialog {
+    width: 100%;
+    height: 100%;
+    background-color: #e9ebec;
+    position: absolute;
+    opacity: 0.2;
+  }
+  .endpoints-clear-btn {
+    margin: 6px 0 0 7px;
+  }
+  /* end--table*/
+</style>
+
+<style lang="scss">
+  .right-box-edit-endpoint .el-pagination__total {
+    float: left;
+  }
+  right-box-edit-endpoint .pagination {
+    padding-top: 12px;
+    text-align: center;
+  }
+
+  .endpoint-sub-table-paginate .el-pager li, .endpoint-sub-table-paginate .el-pagination .btn-next, .endpoint-sub-table-paginate .el-pagination .btn-prev {
+    font-size: 13px;
+    min-width: 20px !important;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    text-align: center;
+    border: 1px solid rgba(154,154,154,0.20);
+    border-radius: 2px;
+    border-radius: 2px;
+  }
+  .endpoint-sub-table-paginate  .el-pagination.is-background .el-pager li:not(.disabled).active {
+    color: white !important;
+  }
+  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled):hover {
+    color: #666;
+  }
+  .right-box-edit-endpoint .el-pagination .el-pager li.btn-quicknext, .right-box-edit-endpoint .el-pager li.btn-quickprev {
+    line-height: 20px;
+  }
+  .right-box-edit-endpoint .el-pagination .el-pager .more::before {
+    line-height: 20px;
+  }
+  .right-box-edit-endpoint .el-pager li.number{
+    font-family: NotoSansSC-Regular;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .right-box-edit-endpoint .el-pager li.number.active{
+    font-family: NotoSansSC-Regular;
+    color: #FFFFFF;
+    letter-spacing: 0;
+  }
+
+  .endpoint-sub-table-paginate .el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: $global-text-color-active;
+    border-radius: 2px;
+    border-radius: 2px;
+  }
+  .right-box-edit-endpoint .el-pager li:hover, .right-box-edit-endpoint .el-pagination .btn-next:hover, .right-box-edit-endpoint .el-pagination .btn-prev:hover {
+    font-family: NotoSansSC-Regular;
+    color: #666666;
+    letter-spacing: 0;
+    font-weight:normal;
+  }
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner, .right-box-edit-endpoint .el-pagination__editor.el-input .el-input__inner{
+    height: 20px;
+    border-color: rgba(154,154,154,0.20);
+  }
+  .right-box-edit-endpoint .el-pagination__sizes .el-input .el-input__inner:hover{
+    border-color: rgba(154,154,154,0.20);
+  }
 </style>

nezha-fronted/src/components/charts/topology.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="content">
     <div class="network"  v-clickoutside="networkPopClose">
       <!--图拓扑图-->
       <div id="network_id" ref="visNetwork" :class="{'cursorMove': cursorMove}"></div>
@@ -15,20 +15,18 @@
         <div class="btmTriangle"></div>
       </div>
       <!--图谱图右侧-->
-      <div class="networkContent">33333</div>
+      <!--<div class="networkContent">33333</div>-->
     </div>
     <button @click="addModelShow" v-show="!selectNodeTitle">add model</button>
     <button @click="addLineTitleShow" v-show="!selectNodeTitle">add line</button>
     <button @click="lineDel" v-show="!selectNodeTitle">remove line</button>
     <span v-show="selectNodeTitle">请选择两个节点 <button @click="closeAddLine">取消</button></span>
-    <el-dialog
+    <transition name="right-box">
-      :visible.sync="addNodeShow">
+      <add-model  v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel"></add-model>
-      <add-model @addModel="addModel" :nodeData="nodeData"></add-model>
+    </transition>
-    </el-dialog>
+    <transition name="right-box">
-    <el-dialog
+      <add-line  v-if="addLineShow" @addLine="addLine" @lineDel="lineDel" :selectNode="NodeArr" :lineData="lineData" :isAdd="isLineAdd" @close="addLineShow=false" @del="lineDel"></add-line>
-      :visible.sync="addLineShow">
+    </transition>
-      <add-line @addLine="addLine" @lineDel="lineDel" :selectNode="NodeArr" :lineData="lineData"></add-line>
-    </el-dialog>
   </div>
 </template>
 
@@ -50,12 +48,23 @@
       edgesArray:{
         type:Array
       },
+      isFullScreen:{
+        type:Boolean,
+      },
     },
     watch:{
       NodeArr(n){
         if(n.length==2){
+          this.lineData={
+            arrows:'',
+            label:'',
+            color:'#1e90ff',
+            lineId:'',
+            id:'',
+          }
           this.addLineShow=true;
           this.selectNodeTitle=false;
+          this.isLineAdd=true;
         }
       }
     },
@@ -71,8 +80,21 @@
         cursorMove:false,
         NodeArr:[],
         selNodeId:'',
-        lineData:{},
+        lineData:{
-        nodeData:{},
+          arrows:'',
+          label:'',
+          color:'#1e90ff',
+          lineId:'',
+          id:'',
+        },
+        isLineAdd:true,
+        nodeData:{
+          modelId:'',
+          label:'',
+          x:'',
+          y:'',
+          image:'',
+        },
         //viewsCenter
         viewsCenter:{
           x:0,y:0
@@ -92,7 +114,7 @@
         let this_ = this;
         this_.nodes = new Vis.DataSet(this_.nodesArray);
         this_.edges = new Vis.DataSet(this_.edgesArray);
-        this_.container = document.getElementById('network_id');
+        this_.container = this.$refs.visNetwork;
         this_.networkPop = document.getElementById('networkPop');
         this_.data = {
           nodes: this_.nodes,
@@ -127,8 +149,12 @@
           edges: {
             width: 2,
             smooth:{  //设置两个节点之前的连线的状态
-              enabled: false  //默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
+              enabled: true,//默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
+              roundness:0.5,
+              type: "curvedCW",
             },
+            selfReferenceSize:10,
+
           },
           layout:{
             randomSeed: 666,
@@ -164,22 +190,26 @@
         this_.network = new Vis.Network(this_.container, this_.data, this_.options);
         this_.network.moveTo({
           position: this_.viewsCenter,
-          scale: 1,
+          scale: this_.isFullScreen?1.5:1,
           offset: {x:0, y:0},
-        })
+        });
+        if(this_.isFullScreen) {
+          console.log(this_.viewsCenter)
+        }
         this_.containerCanvas=document.querySelectorAll("#network_id canvas")[0];
       },
       resetAllNodes() {
-        let this_ = this;
+        // let this_ = this;
-        this_.nodes.clear();
+        // this_.nodes.clear();
-        this_.edges.clear();
+        // this_.edges.clear();
-        this_.nodes.add(this_.nodesArray);
+        // this_.nodes.add(this_.nodesArray);
-        this_.edges.add(this_.edgesArray);
+        // this_.edges.add(this_.edgesArray);
-        this_.data = {
+        // this_.data = {
-          nodes: this_.nodes,
+        //   nodes: this_.nodes,
-          edges: this_.edges
+        //   edges: this_.edges
-        };
+        // };
-        this_.network = new Vis.Network(this_.container, this_.data, this_.options);
+        // this_.network = new Vis.Network(this_.container, this_.data, this_.options);
+        this.setNetworkData(this.nodesArray,this.edgesArray);
       },
       resetAllNodesStabilize() {
         let this_ = this;
@@ -196,32 +226,53 @@
         });
         this_.network.moveTo({
           position: this_.viewsCenter,
-          scale: 1,
+          scale: this_.isFullScreen?1.5:1,
           offset: {x:0, y:0},
-        })
+        });
+        console.log( this.nodes,this.edges);
+        if(this_.isFullScreen) {
+          console.log(this_.viewsCenter)
+        }
       },
       addModel(model){ // 添加model
         this.addNodeShow=false;
         if(!model){return}
-        model={...model,...this.network.DOMtoCanvas({x:model.x,y:model.y})};
+        model={...model,...this.network.DOMtoCanvas({x:40,y:40})};
         if(!model.image){
           model.image=png
         }
         let nodesArray=[...this.nodesArray];
         nodesArray.push(model);
-        this.$emit("setTopologyData",nodesArray,this.edgesArray,this.setNetworkData);
+        this.$emit("setTopologyData",nodesArray,this.edgesArray);
+        this.setNetworkData(nodesArray,this.edgesArray);
       },
       addModelShow(){ // 显示添加节点弹窗
         this.addNodeShow=true;
+        this.nodeData={
+          modelId:'',
+          label:'',
+          x:'',
+          y:'',
+          image:'',
+        }
       },
-      addLine(edges){ // 添加line
+      addLine(edges){ // 添加或者編輯line
         this.addLineShow=false;
         console.log(edges);
         if(!edges){return}
+        let edgesArray =[...this.edgesArray];
+       if(!this.isLineAdd){
+         console.log(edgesArray.find(item=>item.id ===edges.id));
+         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];
-        let edgesArray =[...this.edgesArray].push(edges);
+       }
-        this.$emit("setTopologyData",this.nodesArray,edgesArray,this.setNetworkData);
+       edgesArray.push(edges);
+       console.log(edgesArray,edges);
+        this.$emit("setTopologyData",this.nodesArray,edgesArray);
+        this.setNetworkData(this.nodesArray,edgesArray);
         this.NodeArr=[];
       },
       addLineTitleShow(){ // 显示添加线弹窗
@@ -238,6 +289,7 @@
         this.nodeData = selItem;
         selItem.x=position[selId].x;
         selItem.y=position[selId].y;
+        console.log(this.nodesArray);
         this.$emit("setTopologyData",this.nodesArray,this.edgesArray);
       },
       setPopPosition(selId,params){//设置节点工具栏位置
@@ -248,21 +300,29 @@
       },
       networkPopClose(){//关闭节点工具栏
         this.networkPopShow=false;
+        this.network.unselectAll();
       },
       //工具栏
       nodeDel(){
         let nodesArray=this.nodesArray.filter((item)=>item.id!==this.selNodeId);
         let edgesArray=this.edgesArray.filter((item)=>item.from!==this.selNodeId || this.to!==this.selNodeId);
-        this.$emit('setTopologyData',nodesArray, edgesArray,this.setNetworkData);
+        this.$emit('setTopologyData',nodesArray, edgesArray);
+        this.setNetworkData(nodesArray, edgesArray);
         this.networkPopClose();
       },
       nodeEdit(){
-        console.log('edit')
+        this.addNodeShow=true;
+        this.nodeData={
+          modelId:'',
+          label:'',
+          image:'',
+        }
       },
       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.$emit('setTopologyData',this.nodesArray, edgesArray);
+        this.setNetworkData(this.nodesArray,edgesArray);
       },
     },
     mounted(){
@@ -284,9 +344,12 @@
            }
          });
 
-        this.network.on("selectEdge", function (params) {
+         this.network.on("selectEdge", function (params) { // 选择边
-          this_.lineData.id=params.edges[0];
+           this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
-          console.log(this_.lineData.id);
+           this_.lineData.color=this_.lineData.color.color;
+           this_.addLineShow=true;
+           this_.isLineAdd=false;
+           console.log(this_.lineData)
          });
 
          this.network.on("dragStart", function (params) {//节点移动开始
@@ -305,25 +368,27 @@
            this_.viewsCenter=this_.network.getViewPosition();
            let selId=params.nodes[0];
            if(selId){
-            this_.setPopPosition(selId,params)
+             this_.setPopPosition(selId,params);
              this_.setNodePosition(selId)
            }
          });
+
          this.network.on("hoverNode", function (params) {//hoverNode
            this_.cursorMove=true;
-          console.log(params);
-        });
-        this.network.on("blurNode", function (params) {//blurNode
-          this_.cursorMove=false;
-          // console.log(params);
-        });
          });
 
+         this.network.on("blurNode", function (params) {//blurNode
+           this_.cursorMove=false;
+         });
+       })
     }
 	}
 </script>
 
 <style scoped>
+  .content{
+    height: 100%;
+  }
   .network{
     display: flex;
     height: calc(100% - 30px);
@@ -363,7 +428,8 @@
     left: -9px;
   }
   #network_id{
-    width: 60%;
+    width: 90%;
+    height: 100%;
   }
   .cursorMove{
     cursor: move;

nezha-fronted/src/components/charts/visNetwork.vue

@@ -38,17 +38,17 @@
           </el-dropdown>
         </div>
         <div class="mt-10 table-container">
-          <topology :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData"></topology>
+          <topology :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="false" ref="topology"></topology>
         </div>
         <!--全屏-->
-        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="screenModal = false" >
+        <el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"  :visible.sync="screenModal" width="96%"  @close="exitFull">
           <div slot="title">
             <!--<span class="nz-dialog-title">{{data.title}}</span>-->
             <div class="float-right panel-calendar dialog-tool">
               <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
             </div>
           </div>
-          33333
+          <topology :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="true" ref="topologyFull"></topology>
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
         <span class="vue-resizable-handle" @mousedown="startResize"></span>
@@ -151,22 +151,22 @@
           { id: 1, label: "model",
             image: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1906469856,4113625838&fm=26&gp=0.jpg',
             shape:'image',shapeProperties:{useImageSize:false},
-            x:0,y:0,
+            x:1,y:-63,
           },
-          {id: 2, label: "model", x:-254,y:-59, image: png, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 2, label: "model", x:-236,y:-163, image: png, shape:'image',shapeProperties:{useImageSize:false}},
-          {id: 3, label: "model", x:114,y:-36, image: png, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 3, label: "model", x:-346,y:-155, image: png, shape:'image',shapeProperties:{useImageSize:false}},
-          {id: 4, label: "model", x:-126,y:54, image: png, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 4, label: "model", x:-129,y:169, image: png, shape:'image',shapeProperties:{useImageSize:false}},
-          {id: 5, label: "model", x:125,y:67, image: png, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 5, label: "model", x:-388,y:35, image: png, shape:'image',shapeProperties:{useImageSize:false}},
-          {id: 6, label: "model", x:-211,y:0, image: png, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 6, label: "model", x:-345,y:-53, image: png, shape:'image',shapeProperties:{useImageSize:false}},
-          {id: 7, label: "model", x:200,y:100, image: png, shape:'image',shapeProperties:{useImageSize:false}},
+          {id: 7, label: "model", x:316,y:22, image: png, shape:'image',shapeProperties:{useImageSize:false}},
         ],
         edgesArray:[
-          {id: 0,from: 2, to: 1,label:"hahah",arrows:'from;to', color: {color:'red',highlight:'red',hover:'red',opacity:1.0},},
+          {id: 0,from: 2, to: 1,label:"hahah",arrows:'from;to', color: {color:'#ff4500',highlight:'#ff4500',hover:'#ff4500',opacity:1.0}},
-          {id: 1,from: 3, to: 1,label:"hahah",arrows:'from'},
+          {id: 1,from: 3, to: 1,label:"hahah",arrows:'from',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
-          {id: 2,from: 5, to: 4,label:"hahah",arrows:'to'},
+          {id: 2,from: 5, to: 4,label:"hahah",arrows:'to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
-          {id: 3,from: 4, to: 1,label:"hahah",arrows:'from;to'},
+          {id: 3,from: 4, to: 1,label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
-          {id: 4,from: 4, to: 6,label:"hahah",arrows:'from;to'},
+          {id: 4,from: 4, to: 6,label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
-          {id: 5,from: 1, to: 7,label:"hahah",arrows:'from;to'},
+          {id: 5,from: 1, to: 7,label:"hahah",arrows:'from;to',smooth:true, color: {color:'#1e90ff',highlight:'#1e90ff',hover:'#1e90ff',opacity:1.0}},
         ],
       }
 
@@ -290,9 +290,11 @@
 
         this.seriesItemScreen = this.seriesItem;
         this.screenModal = true;
-        this.$nextTick(()=>{
+        if(this.$refs.topologyFull){
-          this.init('screenModal');
+          setTimeout(()=>{
+            this.$refs.topologyFull.resetAllNodes();
           })
+        }
       },
       // 设置数据, filter区分
       setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
@@ -387,13 +389,15 @@
         return num;
       },
       // 设置拓扑图数据
-      setTopologyData(nodesArr,edgesArr,callback){
+      setTopologyData(nodesArr,edgesArr){
         this.nodesArray=nodesArr;
         this.edgesArray=edgesArr;
-        if(callback){
-          callback(this.nodesArray,this.edgesArray);
-        }
       },
+      //退出全屏
+      exitFull(){
+        this.screenModal = false;
+        this.$refs.topology.resetAllNodes()
+      }
     },
 
     mounted(){