module 从上层传递

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

@@ -2,15 +2,18 @@
   <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 ">
+      <!--<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-icon"><i class="el-icon-delete"></i></span>-->
-        <span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>
+        <!--<span class="right-box-top-btn-txt">{{$t('overall.delete')}}</span>-->
-      </button>
+      <!--</button>-->
     </div>
     <!-- end--顶部按钮-->
 
     <!-- begin--标题-->
-    <div class="right-box-title">{{$t("project.endpoint.editEndpoint") + "  ID：" + nodeData.id}}</div>
+    <div class="right-box-title">
+      <!--{{$t("project.endpoint.editEndpoint") + "  ID：" + nodeData.id}}-->
+      Add Module
+    </div>
     <!-- end--标题-->
 
     <!-- begin--表单-->
@@ -19,9 +22,9 @@
         <el-form-item label="Module Name" prop="modelId">
           <el-select v-model="form.modelId" placeholder=""  popper-class="asset-dropdown">
             <el-option
-              v-for="item in nodesArray"
+              v-for="item in moduleDataS.module"
               :key="item.id"
-              :label="item.label"
+              :label="item.name"
               :value="item.id">
             </el-option>
           </el-select>
@@ -41,10 +44,6 @@
             </el-option>
           </el-select>
         </el-form-item>
-
-        <!--<el-form-item label="image">-->
-          <!--<el-input v-model="form.image"></el-input>-->
-        <!--</el-form-item>-->
         <!--<div  class="right-box-sub-title">-->
           <!--<span>{{$t('alert.config.expr')}}</span>-->
           <!--<span class="float-right" @click="addExpression"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>-->
@@ -62,7 +61,7 @@
             <!--@removeExpression="removeExpression"-->
           <!--&gt;</promql-input>-->
           <!--<el-row>-->
-            <!--<template v-if="editChart.type != 'singleStat'">-->
+            <!--<template>-->
               <!--<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">-->
                 <!--{{$t('dashboard.panel.chartForm.legend')}}&nbsp;-->
                 <!--<el-popover :content="$t('dashboard.panel.chartForm.legendTip')" placement="top" width="150" trigger="hover">-->
@@ -73,18 +72,6 @@
                 <!--<el-input v-model="legends[index-1]" type="text" size="small"></el-input>-->
               <!--</el-col>-->
             <!--</template>-->
-            <!--<template v-else>-->
-              <!--<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">-->
-                <!--{{$t('dashboard.panel.chartForm.statistics')}}&nbsp;-->
-              <!--</el-col>-->
-              <!--<el-col style="width: calc(100% - 120px);">-->
-                <!--<el-select popper-class="chart-box-dropdown-mini" v-model="statistics" placeholder="" size="small">-->
-                  <!--<el-option v-for="item in statisticsList" :key="item.value" :label="item.label" :value="item.value">-->
-                    <!--<span class="panel-dropdown-label-txt" >{{item.label}}</span>-->
-                  <!--</el-option>-->
-                <!--</el-select>-->
-              <!--</el-col>-->
-            <!--</template>-->
           <!--</el-row>-->
         <!--</el-row>-->
       </el-form>
@@ -105,20 +92,29 @@
 </template>
 
 <script>
-  // import promqlInput from "@compotents/page/dashboard/explore/promqlInput";
+  import promqlInput from "@/components/page/dashboard/explore/promqlInput";
+  import {getUUID,resetZIndex} from "@/components/common/js/common";
   import  a from './a.png'
   import  b from './b.png'
   import  c from './c.png'
   import  d from './d.png'
   import  e from './e.png'
   import  f from './f.png'
+  var rz = {
+    methods: {
+      rz(e) {
+        resetZIndex(e);
+      }
+    }
+  };
 	export default {
 		name:"addNode",
     components:{
-      // 'promql-input': promqlInput,
+      'promql-input': promqlInput,
     },
     props:{
-      nodeData:{}
+      nodeData:{},
+      moduleDataS:{}
     },
     watch:{
       nodeData:{
@@ -130,6 +126,13 @@
        },
        immediate: true,
        deep: true,
+      },
+      moduleDataS:{
+        handler(n){
+          console.log(n)
+        },
+        immediate: true,
+        deep: true,
       }
     },
     data(){
@@ -140,6 +143,9 @@
         },
         promqlKeys:[],
         expressions: [],
+        promqlCount:0,
+        elementIds:[],
+        legends:[],
         rules:{
           modelId:[
             { required: true, message: '请选择module', trigger: 'blur' },
@@ -169,12 +175,12 @@
           {id: 14, label: "model14",},
         ],
         iconArray:[
-          {id:1,image:a,label:'model1',},
+          {id:1,image:a},
-          {id:2,image:b,label:'model2',},
+          {id:2,image:b},
-          {id:3,image:c,label:'model3',},
+          {id:3,image:c},
-          {id:4,image:d,label:'model4',},
+          {id:4,image:d},
-          {id:5,image:e,label:'model5',},
+          {id:5,image:e},
-          {id:6,image:f,label:'model6',},
+          {id:6,image:f},
           // {id:7,img:'./a.png',label:'model',},
         ],
       }
@@ -183,9 +189,10 @@
       onSubmit(){
         this.$refs['form'].validate((valid) => {
           if (valid) {
-            let module=this.nodesArray.find(item=>item.id===this.form.modelId);
+            let module=this.moduleDataS.module.find(item=>item.id===this.form.modelId);
             let img=this.iconArray.find(item=>item.id===this.form.imgId);
             let model=Object.assign({...this.form},{...module},{...img},{id:this.form.modelId,shape:'image',shapeProperties:{useImageSize:false}},);
+            model.label=model.name
             this.$emit('addModel',model)
           }
         });
@@ -405,7 +412,10 @@
   .z-top {
     z-index: 2900;
   }
-
+  .right-box-title{
+    font-weight: bold;
+    font-size: 24px;
+  }
 </style>
 
 <style lang="scss">

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

@@ -82,6 +82,7 @@
           :panel-id="item.id"
           :chart-data="item"
           :chart-index="0"
+          :allModuleInfo="allModuleInfo"
         >
         </vis-network>
       </div>
@@ -174,7 +175,8 @@
             pending:40,
             other:10,
           }
-        }
+        },
+        allModuleInfo:[]
       }
     },
     mounted(){
@@ -188,7 +190,8 @@
         this.projectInfo.loading=true;
         this.$get('project/info', {id:n.id}).then(response => {
           if (response.code === 200) {
-            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length}
+            this.projectInfo={...this.projectInfo,...response.data.basic,moduleMum:response.data.module.length};
+            this.allModuleInfo=response.data;
            this.$nextTick(()=>{
              this.projectInfo.loading=false;
            })
@@ -267,7 +270,7 @@
   .facade-content{
     flex: 1;
     min-height: 800px;
-    width: 80%;
+    width: calc(100% - 20px);
   }
   .label{
     padding: 0 15px;

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

@@ -11,6 +11,9 @@
         <span class="edit-topology-add" @click="addLineTitleShow">Add</span>
         <span class="edit-topology-remove" @click="lineDel">Remove</span>
       </span>
+      <span v-show="!selectNodeTitle&&editVisNetwork" class="edit-topologyLine">
+        <el-button>save</el-button>
+      </span>
       <span class="edit-topology-line-cancel" v-show="selectNodeTitle&&editVisNetwork">Please select two nodes  <span class="edit-topologyCancel" @click="closeAddLine">Cancel</span></span>
     </div>
     <div class="network" ref="network"  v-clickoutside="networkPopClose" @mousedown="(e)=>{modelTopMouseDown(e)}" @mouseup="(e)=>modelTopMouseUp(e)">
@@ -62,10 +65,13 @@
         <i class="nz-icon nz-icon-model"></i>
       </i>
       <!--悬浮network部分-->
+      <div class="network-info">
+        123
+      </div>
 
     </div>
     <transition name="right-box">
-      <add-model  v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd"></add-model>
+      <add-model  v-if="addNodeShow" @addModel="addModel" :nodeData="nodeData" @close="addNodeShow=false" @del="nodeDel" :isAdd="isNodeAdd" :moduleDataS="allModuleInfos"></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>
@@ -95,7 +101,8 @@
       },
       editVisNetwork:{
         type:Boolean,
-      }
+      },
+      allModuleInfo:{}
     },
     watch:{
       NodeArr(n){
@@ -119,10 +126,18 @@
           this.selNodeId='';
           this.selectNodeTitle=false;
         }
+      },
+      allModuleInfo:{
+        immediate: true,
+        deep: true,
+        handler(n){
+          this.allModuleInfos={...n}
+        },
       }
     },
     data(){
 		  return {
+        allModuleInfos:[],
         relativeModelTop:{},
         index:'',
         zoom:1,
@@ -398,7 +413,7 @@
           })
         })
       },
-      selNodeArrUpdate(){// 选中狂位置更新
+      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});
@@ -472,10 +487,10 @@
          });
 
          this.network.on("selectEdge", function (params) { // 选择边
-           this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
+           // this_.lineData=this_.edgesArray.find((item)=>item.id===params.edges[0]);
-           this_.lineData.color=this_.lineData.color.color;
+           // this_.lineData.color=this_.lineData.color.color;
-           this_.addLineShow=true;
+           // this_.addLineShow=true;
-           this_.isLineAdd=false;
+           // this_.isLineAdd=false;
          });
 
          this.network.on("dragStart", function (params) {//节点移动开始
@@ -741,4 +756,9 @@
     left: 15px;
     font-size: 18px;
   }
+  .network-info{
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
 </style>

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

@@ -31,7 +31,17 @@
             </span>
         </div>
         <div class="vis-network-content">
-          <topology :editVisNetwork="editVisNetwork" :nodesArray="nodesArray" :edgesArray="edgesArray" @setTopologyData="setTopologyData" :isFullScreen="false" ref="topology"></topology>
+          <topology
+            :editVisNetwork="editVisNetwork"
+            :nodesArray="nodesArray"
+            :edgesArray="edgesArray"
+            @setTopologyData="setTopologyData"
+            :isFullScreen="false"
+            ref="topology"
+            :allModuleInfo="allModuleInfo"
+          >
+
+          </topology>
         </div>
       </div>
 
@@ -67,6 +77,7 @@
       chartData: {
         type: Object
       },
+      allModuleInfo:{}
     },
     data () {
       return {