feat ： topo重构功能基本完成 剩下细节优化 以及 tooltip 等数值绑定到页面

nezha-fronted/src/components/common/project/L5/CanvasProps.vue

@@ -1664,7 +1664,10 @@
         console.log(index,row)
       },
       valueMappingDel(index,row){
-        console.log(index,row)
+        this.selection.pen.data.valueMapping.splice(index,1);
+        this.selection.pen.data.valueMapping.forEach((item,index)=>{
+          item.level=index
+        });
       },
       inputFocus(e){
         console.log(e.path[2].children[0],e.path[2].children[1]);

nezha-fronted/src/components/common/project/L5/topoTooltip.vue

@@ -1,18 +1,21 @@
 <template>
-  <div style="width: 400px;height: 400px;">
+  <div style="display: flex;">
     <span class="temp-dom"></span>
-    <line-chart-block v-if="chartData.type !== 'table'"
+    <div style="width: 400px;height: 400px;" v-if="chartData.displayChart">
-                      :key="'inner' + chartData.id"
+      <line-chart-block v-if="chartData.type !== 'table'"
-                      :from="'project'"
+                        :key="'inner' + chartData.id"
-                      :ref="'editChart' + 0"
+                        :from="'project'"
-                      :temp-dom="tempDom"
+                        :ref="'editChart' + 0"
-                      :panel-id="-1"
+                        :temp-dom="tempDom"
-                      :is-lock="true"
+                        :panel-id="-1"
-                      :chart-index="0"
+                        :is-lock="true"
-                      :chartTitleShow="false"
+                        :chart-index="0"
-                      :chart-data="chartData">
+                        :chartTitleShow="false"
+                        :chart-data="chartData">
+
+      </line-chart-block>
+    </div>
 
-    </line-chart-block>
     <!--<chart-table  v-if="chartData.type === 'table'"-->
                   <!--:ref="'editChart'+0"-->
                   <!--:key="'inner' + 0"-->
@@ -22,7 +25,7 @@
                   <!--:panel-id="-1"-->
                   <!--:chart-data="chartData"-->
                   <!--:chart-index="0"></chart-table>-->
-    <>
+    <expression-info :chart-data="chartData"/>
   </div>
 </template>
 
@@ -31,9 +34,11 @@
   import lineChartBlock from '../../../charts/line-chart-block';
   import bus from "../../../../libs/bus";
   import axios from 'axios';
+  import ExpressionInfo from "../popData/expressionInfo";
 	export default {
 		name:"topoTooltip",
     components:{
+      ExpressionInfo,
       lineChartBlock,
     },
     props:{
@@ -99,7 +104,6 @@
         };
         chartData.span=12;
         this.chartData=chartData;
-        console.log(chartData);
         setTimeout(()=>{
           this.getChartData(chartData,0);
         });
@@ -107,7 +111,6 @@
       },
       // 获取一个图表具体数据,图表信息，图表位置index
       getChartData(chartInfo, pos, filterType) {
-        console.log(chartInfo,'chartInfo')
         const chartItem = chartInfo;
         const index = pos; // 指标
           // 没有数据的设置提示信息暂无数据-针对每一个图
@@ -145,7 +148,6 @@
             setTimeout(()=>{
               this.$nextTick(() => {
                 let res=chartItem.res;
-                console.log(res);
                 if (res.length > 0) {
                   let series = [];
                   let singleStatRlt = '';
@@ -174,7 +176,6 @@
                           }
                         } else {
                           response.data.result.forEach((queryItem, resIndex) => {
-                            console.log(queryItem, resIndex);
                             let seriesItem = {
                               theData: {
                                 name: '',
@@ -311,7 +312,6 @@
                       }
                     }
                   });
-                  console.log(this.$refs['editChart' + chartItem.id],chartItem.id);
                   if (this.$refs['editChart' + chartItem.id]) {
                     let chartData = {
                       chartItem: chartItem,
@@ -340,8 +340,6 @@
                         this.$refs['editChart' + chartItem.id].setData(chartItem, series,
                           this.filter.panelId, this.filter, legend, filterType, errorMsg);
                       } else {
-                        console.log(123123123123123123,chartItem, series,
-                          this.filter.panelId, this.filter, legend, '', errorMsg);
                         this.$refs['editChart' + chartItem.id].setData(chartItem, series,
                           this.filter.panelId, this.filter, legend, '', errorMsg);
                       }

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

@@ -1,31 +1,12 @@
 <template>
-  <div class="expressionInfo" :style="{top:expressionsInfoPosition.y+'px',left:expressionsInfoPosition.x+'px'}" v-if="expressionsData.length">
+  <div class="expressionInfo">
-    <el-tooltip v-model="show" class="item" effect="light" content="Right Bottom 提示文字" placement="right-start" >
+    <div v-if="expressionInfoData.length===0">No Data</div>
-      <div slot="content"  class="main-box">
+    <div v-if="expressionInfoData.length>0">
-        <div v-if="total>10" class="more-title-other">
+      <el-row v-for="(item,index) in expressionInfoData" :key="index">
-          {{$t('dashboard.panel.moreTitleOther')}}{{$t('dashboard.panel.showAllOther')}} {{ total}}
+        {{item.legend.alias}}
-        </div>
+        {{item.showValue}}
-        <div  v-for="(item,index) in expressionsData" class="expressions-box" :key="index">
+      </el-row>
-          <span class="expressions-box-title">{{item.name}}</span>
+    </div>
-          <div class="expressions-box-content"  v-if="item.value.length!==0">
-            <div v-for="(item1,index2) in item.value" class="expressions-metric" :key="index2">
-              <div v-if="item1.metric">
-                <span class="expressions-box-label">{{legendFormat(item.metric,item.legend,item1.metric)}} :</span>
-                <span class="expressions-box-value">{{ dataFormat(item.unit,item1)}}</span>
-              </div>
-              <div v-if="!item1.metric&&index2%2">
-                <span class="expressions-box-label">{{legendFormat(item.metric,item.legend,item1.metric)}} :</span>
-                <span class="expressions-box-value">{{ dataFormat(item.unit,item1)}}</span>
-              </div>
-            </div>
-          </div>
-          <div v-if="item.value.length===0" class="expressions-box-content">
-            NoData
-          </div>
-        </div>
-      </div>
-      <div></div>
-    </el-tooltip>
   </div>
 </template>
 
@@ -34,86 +15,33 @@
   export default {
     name:"expressionInfo",
     props:{
-      lineId:{required:true},
+      chartData:{
-      edgesArray:{},
+
-      expressionsInfoPosition:{},
+      }
     },
     watch:{
-      expressionsInfoPosition:{
+      chartData(){
-        deep:true,
+        this.expressionInfoData=[];
-        immediate: true,
-        handler(n){
-          this.show=false;
-          this.expressionsInfoPosition=n;
-          this.$nextTick(()=>{
-            this.show=true;
-          })
-        }
       }
     },
     data(){
       return{
-        expressionsData:[],
+        expressionInfoData:[]
-        show:true,
-        total:0,
       }
     },
     mounted(){
-      let index=0;
+      console.log(this.chartData);
-      let arr=this.edgesArray.find(item=>item.id===this.lineId).expressions;
+      if(this.chartData.res.length>0){
-      if(arr.length===0){return};
+        this.chartData.res.forEach((item,index)=>{
-      arr.forEach((item,i)=>{
+          if(item.status==='success'){
-        if(index<11){
+            this.expressionInfoData=this.expressionInfoData.concat(item.data.result);
-          this.expressionsData.push({...item,value:[]})
-        }
-        item.value=item.value || [];
-        item.value.forEach((item1,j)=>{
-          index++;
-          if(index<11){
-            this.expressionsData[i].value.push(item1)
           }
-        })
+        });
-      });
+        console.log(this.expressionInfoData);
-      this.total=index;
+      }
     },
     methods:{
-      dataFormat(unit,value){
-        if(value.value){
-          value=value.value[1]
-        }else{
-          value=value
-        }
-        return chartDataFormat.getUnit(unit?unit:2).compute(value)
-      },
-      legendFormat:function(legend,expression,metric){
-        if(/\{\{.+\}\}/.test(expression)&&expression){
-          let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
-            let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2);
-            let reg=new RegExp(label+'=".+?"');
-            let value=null;
-            if(reg.test(legend)){
-              let find=legend.match(reg)[0];
-              value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
-            }
-            return value?(' '+value + ' '):(' '+label + ' ');
-          });
-          if(Object.keys(metric).length>0){
-            let arr=labelValue.split(' ');
-            labelValue='';
-            arr.forEach((item)=>{
-              if(metric[item]){
-                labelValue+=metric[item] + ' '
-              }else{
-                labelValue+=item + ' '
-              }
-            });
-          }
-          return labelValue
-        }else{
-          return expression?expression:legend;
-        }
 
-      },
     },
     beforeDestroy(){
 
@@ -122,72 +50,5 @@
 </script>
 
 <style scoped>
-  /deep/ .el-tooltip__popper{
+
-    max-width: none;
-  }
-  .expressionInfo{
-    position: absolute;
-    transform: translateX(20px);
-    min-height: 20px;
-    max-height: 200px;
-    overflow: hidden;
-  }
-  .item{
-    background: #FFFFFF;
-    box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.11);
-    border-radius: 4px;
-  }
-  .more-title-other{
-    margin-top: 5px;
-    margin-bottom: 5px;
-    font-size: 14px;
-    color: #FA901C;
-  }
-  .main-box{
-    min-width: 150px;
-    padding: 0 5px 5px 5px;
-  }
-  .expressions-box{
-    min-width: 100px;
-  }
-  .main-box .expressions-box:not(:last-child){
-    border-bottom: 1px dashed #ebeef5;
-    padding-bottom: 5px;
-  }
-  .expressions-box-title{
-    margin-bottom: 5px;
-    margin-top: 10px;
-    display: inline-block;
-    font-weight: bold;
-    font-size: 14px;
-    color: #333333;
-  }
-  .expressions-box-label{
-    font-size: 14px;
-    color: #666666;
-    padding: 3px;
-    min-width:60px;
-    text-align: left;
-  }
-  .expressions-box-value{
-    font-size: 14px;
-    color: #3C92F1;
-    padding: 3px 3px 3px 5px;
-    min-width:40px;
-  }
-  .expressions-box-content{
-    border-bottom: none;
-  }
-  .expressions-metric{
-    display: flex;
-  }
-  .expressions-metric > span{
-    /*width: 50%;*/
-    /*overflow: hidden;*/
-    /*text-overflow:ellipsis;*/
-    /*white-space: nowrap;*/
-    /*text-align: left;*/
-  }
-  .expressions-metric > span:not(:first-child){
-  }
 </style>

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

@@ -4,7 +4,7 @@
 </style>
 <template>
   <div class="project-box">
-    <div class="project-title" v-if="showTopTools">
+    <div class="project-title" v-if="showTopTools&&!fromOverView">
       <div v-show="editTopologyFlag" class="edit-topologyLine">
         <!--工具栏-->
         <span class="project-topology-tool">
@@ -128,7 +128,7 @@
     </div>
     <div class="page">
       <!--画布部分-->
-      <div id="topology-canvas" class="full" ref="topology-canvas"></div>
+      <div :id="'topology-canvas' + topologyIndexF" class="full" ref="topology-canvas"></div>
       <!--设置属性-->
       <div class="props" v-if="editTopologyFlag&&toolShow.attr">
         <CanvasProps :selection.sync="props"
@@ -253,6 +253,7 @@
   import endpointTable from "./popData/endpointTable";
   import ExpressionInfo from "./popData/expressionInfo";
   import topoTooltip from "./L5/topoTooltip";
+  import {getMetricTypeValue} from '../js/tools'
   import bus from "../../../libs/bus";
   import axios from 'axios';
 
@@ -374,6 +375,10 @@
       showTopTools:{
         type:Boolean,
         default:true,
+      },
+      fromOverView:{
+        type:Boolean,
+        default:false,
       }
     },
     watch:{
@@ -419,7 +424,7 @@
       }
     },
     mounted(){
-      document.getElementById('topology-canvas').addEventListener('mousemove',this.canvasMove);
+      document.getElementById('topology-canvas'+this.topologyIndexF).addEventListener('mousemove',this.canvasMove);
       window.addEventListener('resize',this.winResize)
     },
     methods:{
@@ -463,10 +468,12 @@
             Promise.all(promiseArr).then((res)=>{
               getTopology(this.topologyIndex).open(data);
               getTopology(this.topologyIndex).lock(1);
+              if(this.fromOverView){
+                getTopology(this.topologyIndex).centerView();
+                // getTopology(this.topologyIndex).fitView();
+                this.getNodesArr();
+              }
             });
-
-
-            this.getNodesArr();
           })
         });
       },
@@ -510,16 +517,14 @@
             Promise.all(promiseArr).then((res)=>{
               getTopology(this.topologyIndex).open(data);
               getTopology(this.topologyIndex).lock(1);
+              this.getNodesArr();
             });
-
-
-            this.getNodesArr();
           })
         });
       },
       openTopologyData(data){
         return new Promise(resolve=>{
-          let canvas=new Topology('topology-canvas',canvasOptions);
+          let canvas=new Topology('topology-canvas'+this.topologyIndexF,canvasOptions);
           canvas.open(data);
           setTopology(this.topologyIndex,canvas);
           if(!getTopology(this.topologyIndex).data.name){
@@ -535,16 +540,20 @@
       //获取topology数据
       getTopologyData(){
         return new Promise(resolve=>{
-          let data=localStorage.getItem('data');
+          this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
-          data=data?JSON.parse(data):{
+            let data=res.data.topo;
-            bkColor:'#FFFFFF',
+            if(!data.pens){
-            gridSize:10,
+              data={
-            gridColor:'#ededed',
+                bkColor:'#FFFFFF',
-            lineWidth:1,
+                gridSize:10,
-            ruleColor:"#4e4e4e"
+                gridColor:'#ededed',
-          };
+                lineWidth:1,
-          this.saveData={...data};
+                ruleColor:"#4e4e4e"
-          resolve(data);
+              };
+            }
+            this.saveData={...data};
+            resolve(data);
+          })
         });
       },
       //赋值动画
@@ -557,7 +566,6 @@
             }
             if (response.data.result) {
               response.data.result.forEach((queryItem, resIndex) => {
-                queryItem.showValue=9;
                 pen.data.valueMapping.forEach((item,index)=>{
                   if(item.value==='base'){return}
                   if( queryItem.showValue >item.value){
@@ -577,14 +585,15 @@
         if(maxLevel!==0){
           if(pen.type===0){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
-            onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
             pen.font.color=selLevel.color.text;
+            onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
           }else if(pen.type===1){// 判断valueMapping 给相应的状态
             let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
 
             pen.animateColor=selLevel.color.fill;
             pen.strokeStyle=selLevel.color.line;
             pen.animateType=selLevel.animateType;
+            pen.font.color=selLevel.color.text;
             onChangeAnimateLine(pen,pen.animateType);
             pen.font.color=selLevel.color.text;
           }
@@ -641,7 +650,7 @@
                     alias = host;
                   }
                   queryItem.legend={name: host+"-"+pen.data.legends[innerPos]+"-" + resIndex, alias: alias};
-                  queryItem.showValue=this.getMetricTypeValue(queryItem,type);
+                  queryItem.showValue= getMetricTypeValue(queryItem.values,type);
                   // 图表中每条线的名字,去掉最后的逗号与空格:metric名称,  标签1=a,标签2=c
                 }
               });
@@ -668,33 +677,6 @@
           return expression;
         }
       },
-      getMetricTypeValue(queryItem,type){
-        let copy='';
-        copy=JSON.parse(JSON.stringify(queryItem.values));
-        switch (type) {
-          case 'min':
-            let min =copy.sort((x,y)=>{return parseFloat(x[1]) - parseFloat(y[1])})[0][1];
-            return min;
-          case 'max':
-            let max =copy.sort((x,y)=>{return parseFloat(y[1]) - parseFloat(x[1])})[0][1];
-            return max;
-          case 'avg':
-            copy = copy.map(t=>parseFloat(t[1]));
-            let sum = eval(copy.join('+'));
-            let avg = sum / copy.length;
-            return avg;
-          case 'last':
-            let last =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[0][1];
-            return last;
-          case 'first':
-            let first =copy.sort((x,y)=>{return parseFloat(y[0]) - parseFloat(x[0])})[copy.length][1];
-            return first;
-          case 'total':
-            copy = copy.map(t=>parseFloat(t[1]));
-            let total = eval(copy.join('+'));
-            return total;
-        }
-      },
       //获取module
       getModule(){
         this.projectInfo.loading=true;
@@ -810,8 +792,8 @@
             ...node.data,
             rect:{
               ...node.data.rect,
-              x:this.$refs['topology-canvas'].offsetWidth/2-50,
+              x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth/2-50,
-              y:this.$refs['topology-canvas'].offsetHeight/2-50
+              y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight/2-50
             }
           });
         setTimeout(()=>{
@@ -1027,7 +1009,7 @@
               }
               break;
             case 'resize':
-              let domRect=document.getElementById('topology-canvas').getBoundingClientRect();
+              let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
               this.toolShow.attrCord=[domRect.width-350,0];
               this.toolShow.height=domRect.height;
               getTopology(this.topologyIndex).canvasPos=domRect;
@@ -1290,7 +1272,7 @@
               item.font.color="#000000";
             }
           })
-          let domRect=document.getElementById('topology-canvas').getBoundingClientRect();
+          let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
           this.toolShow.attrCord=[domRect.width-350,0];
           this.toolShow.height=domRect.height;
           getTopology(this.topologyIndex).canvasPos=domRect;
@@ -1330,15 +1312,33 @@
         if(flag){
           this.editTopologyFlag=false;
           localStorage.setItem('data',JSON.stringify(topologyData));
-          this.$nextTick(()=>{
+
-            getTopology(this.topologyIndex).lock(1);
+          this.$put('/project/topo',{topo:JSON.stringify(topologyData),projectId:this.projectInfo.id}).then(res=>{
-            let domRect=document.getElementById('topology-canvas').getBoundingClientRect();
+            this.prevent_opt.save=false;
-            this.toolShow.attrCord=[domRect.width-350,0];
+            if(res.code===200){
-            this.toolShow.height=domRect.height;
+              this.$message({
-            getTopology(this.topologyIndex).canvasPos=domRect;
+                message: this.$t("tip.saveSuccess"),
-            this.reload();
+                type: 'success'
-          })
+              });
-          this.getNodesArr();
+              this.$nextTick(()=>{
+                getTopology(this.topologyIndex).lock(1);
+                let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
+                this.toolShow.attrCord=[domRect.width-350,0];
+                this.toolShow.height=domRect.height;
+                getTopology(this.topologyIndex).canvasPos=domRect;
+                this.reload();
+              })
+              this.getNodesArr();
+            }
+          }).catch(res=>{
+            this.prevent_opt.save=false;
+            this.$message({
+              message: res.msg,
+              type: 'error'
+            });
+          });
+
+
         }else{
           this.$message({
             showClose:true,
@@ -1352,7 +1352,7 @@
         this.editTopologyFlag=false;
         this.$nextTick(()=>{
           getTopology(this.topologyIndex).lock(1);
-          let domRect=document.getElementById('topology-canvas').getBoundingClientRect();
+          let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
           this.toolShow.attrCord=[domRect.width-350,0];
           this.toolShow.height=domRect.height;
           getTopology(this.topologyIndex).canvasPos=domRect;
@@ -1366,7 +1366,7 @@
       /*tools 方法*/
 
       winResize(){
-        let domRect=document.getElementById('topology-canvas').getBoundingClientRect();
+        let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
         this.toolShow.attrCord=[domRect.width-350,0];
         this.toolShow.height=domRect.height;
         getTopology(this.topologyIndex).canvasPos=domRect;
@@ -1402,7 +1402,7 @@
     destroyed(){
       getTopology(this.topologyIndex).destroy();
       setTopology(this.topologyIndex,null);
-      document.getElementById('topology-canvas').removeEventListener('mousemove',this.canvasMove);
+      document.getElementById('topology-canvas'+this.topologyIndexF).removeEventListener('mousemove',this.canvasMove);
       window.removeEventListener('resize',this.winResize)
     }
   }

nezha-fronted/src/components/page/dashboard/overview/overview2.vue

@@ -132,9 +132,9 @@
                     <div class="maskLayer" @click="toProject(item)"></div>
                     <span class="project-name">{{item.name}}</span>
                     <topology
-                      :nodesArray="item.nodesArray"
+                      :obj="item"
-                      :edgesArray="item.edgesArray"
+                      :fromOverView="true"
-                      :viewsCenter="item.topo.viewsCenter"
+                      :topologyIndexF="index"
                     />
                   </el-carousel-item>
                 </el-carousel>
@@ -238,7 +238,7 @@
   import iconShadow from 'leaflet/dist/images/marker-shadow.png';
   import * as echarts from "echarts";
   import chartConfig from './chartConfig'
-  import overViewTopology from '../../../common/project/overViewTopology'
+  import overViewTopology from '../../../common/project/topologyL5'
   import messageAsset from '../../../common/overView/messageAsset'
   var timeout; //第三行第三个图的dropdown下拉菜单timeout
 
@@ -443,22 +443,15 @@
             res2=res2.map((item,index)=>{
               return {...item.data.data,...res.data.list[index]}
             })
-            res2=res2.filter((item)=>item.topo&&(item.topo.nodes.length ||item.topo.lines.length));
+            res2=res2.filter((item)=>item.topo&&item.topo.pens&&item.topo.pens.length);
             if(res2.length==0){
               this.topologyLoading=false;
             }
             res2.forEach(item=>{
-              promiseArr.push(this.formatNodesArr(item.topo.nodes));
-              item.edgesArray=this.formatEdgesArr(item.topo.lines);
               temp.push(item)
             });
-            Promise.all(promiseArr).then(res=>{
+            this.allProject=temp;
-              temp.forEach((item,index)=>{
+            this.topologyLoading=false;
-                item.nodesArray=res[index]
-              });
-              this.allProject=temp;
-              this.topologyLoading=false;
-            });
           })
         })
       },