popInfo

nezha-fronted/src/components/common/project/popData/popDataInfo.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="info-content">
+    <div class="info-box">
+      <div class="info-box-title">module info</div>
+      <div class="info-box-content">
+        <div class="content-box">
+          <span class="content-title">project</span>
+          <span class="content-text">123</span>
+        </div>
+        <div class="content-box">
+          <span class="content-title">module name</span>
+          <span class="content-text">123</span>
+        </div>
+        <div class="content-box">
+          <span class="content-title">Tag</span>
+          <span class="content-text">123</span>
+        </div>
+        <div class="content-box">
+          <span class="content-title">Port</span>
+          <span class="content-text">123</span>
+        </div>
+        <div class="content-box">
+          <span class="content-title">path</span>
+          <span class="content-text">123</span>
+        </div>
+        <div class="content-box">
+          <span class="content-title">Parameter</span>
+          <span class="content-text">123</span>
+        </div>
+        <div class="content-box">
+          <span class="content-title">Descripsion</span>
+          <span class="content-text">123</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name:"popDataInfo",
+    props:{
+      moduleId:{},
+      projectId:{},
+    },
+    watch:{},
+    data(){
+      return{
+
+      }
+    },
+    mounted(){
+      console.log(this.moduleId,this.projectId)
+    },
+    methods:{},
+  }
+</script>
+
+<style scoped>
+  .info-content{
+    display: flex;
+    margin-right: 15px;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .info-box{
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    width: 173px;
+    margin-bottom: 15px;
+  }
+  .info-box-title{
+    background: #EFEFEF;
+    font-size: 14px;
+    color: #333333;
+    height: 26px;
+    line-height: 26px;
+    padding-left: 12px;
+  }
+  .info-box-content{
+    font-size: 12px;
+    color: #333333;
+    /*padding: 12px;*/
+  }
+  .content-box{
+    padding: 0 12px;
+  }
+  .info-box-content .content-box:not(:last-child){
+    margin-bottom: 5px;
+  }
+  .content-title{
+    color: #666666;
+  }
+</style>

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

@@ -69,8 +69,12 @@
         <div  v-if="popDataShow.main">
           <popDataMain :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataMain>
         </div>
-        <div v-if="popDataShow.total">total</div>
-        <div v-if="popDataShow.info">info</div>
+        <div v-if="popDataShow.total">
+          total
+        </div>
+        <div v-if="popDataShow.info">
+          <popDataInfo :moduleId="this.selNodeId" :projectId="this.allModuleInfo.basic.id"></popDataInfo>
+        </div>
       </div>
 
     </div>
@@ -117,12 +121,14 @@
   import addNode from './addNode'
   import addLine from './addLine'
   import popDataMain from './popData/popDataMain'
+  import popDataInfo from './popData/popDataInfo'
 	export default {
 		name:"topology",
     components: {
       'add-model':addNode,
       'add-line':addLine,
       'popDataMain':popDataMain,
+      'popDataInfo':popDataInfo,
     },
     props:{
       nodesArray:{
@@ -214,12 +220,12 @@
           image:'',
         },
         popData:[
-          {top:'-20px', left:'-17px',className:'nz-icon-endpoint',id:'1'},
-          {top:'-20px', left:'28px',className:'nz-icon-shujuku',id:'2'},
-          {top:'18px',  left:'52px',className:'nz-icon-chart',id:'3'},
-          {top:'56px', left:'28px',className:'',id:'4'},
-          {top:'56px', left:'-17px',className:'nz-icon-info-normal',id:'5'},
-          {top:'18px', left:'-38px',className:'nz-icon-gaojing',id:'6'},
+          {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,
@@ -457,7 +463,7 @@
 
       // 工具的点击 对应的操作
       popClick(id){
-        this.popDataShowUpdate();
+        this.popDataShowUpdate(id);
       },
       modelTopUpdate(){//model上的图标 实时更新
         this.modelTop=[];
@@ -498,8 +504,9 @@
       modelTopClick(item,index){
         this.index=index;
         this.selNodeId=item.id;
-        if(this.selNodeId&&this.networkPopShow){
+        if(this.selNodeId){
           this.setPopPosition(this.selNodeId);
+          this.popDataShowUpdate('main')
         }
       },
       // 数组取差集

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

@@ -211,6 +211,9 @@
   @import './chart.scss';
 </style>
 <style scoped>
+  .nz-icon-edit{
+    margin-right: 5px;
+  }
   .table-container{
     height: calc(100% - 30px);
   }