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

2021-02-04 13:09:03 +08:00
parent b5643f3501
commit 537c03de0d
5 changed files with 118 additions and 263 deletions
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/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]);
--- a/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
+++ b/nezha-fronted/src/components/common/project/L5/topoTooltip.vue
@@ -1,6 +1,7 @@
 <template>
-  <div style="width: 400px;height: 400px;">
+  <div style="display: flex;">
    <span class="temp-dom"></span>
+    <div style="width: 400px;height: 400px;" v-if="chartData.displayChart">
      <line-chart-block v-if="chartData.type !== 'table'"
                        :key="'inner' + chartData.id"
                        :from="'project'"
@@ -13,6 +14,8 @@
                        :chart-data="chartData">

      </line-chart-block>
+    </div>
+
    <!--<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);
                      }
--- a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
+++ b/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">
-    <el-tooltip v-model="show" class="item" effect="light" content="Right Bottom 提示文字" placement="right-start" >
-      <div slot="content"  class="main-box">
-        <div v-if="total>10" class="more-title-other">
-          {{$t('dashboard.panel.moreTitleOther')}}{{$t('dashboard.panel.showAllOther')}} {{ total}}
+  <div class="expressionInfo">
+    <div v-if="expressionInfoData.length===0">No Data</div>
+    <div v-if="expressionInfoData.length>0">
+      <el-row v-for="(item,index) in expressionInfoData" :key="index">
+        {{item.legend.alias}}
+        {{item.showValue}}
+      </el-row>
    </div>
-        <div  v-for="(item,index) in expressionsData" class="expressions-box" :key="index">
-          <span class="expressions-box-title">{{item.name}}</span>
-          <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,87 +15,34 @@
  export default {
    name:"expressionInfo",
    props:{
-      lineId:{required:true},
-      edgesArray:{},
-      expressionsInfoPosition:{},
+      chartData:{
+
+      }
    },
    watch:{
-      expressionsInfoPosition:{
-        deep:true,
-        immediate: true,
-        handler(n){
-          this.show=false;
-          this.expressionsInfoPosition=n;
-          this.$nextTick(()=>{
-            this.show=true;
-          })
-        }
+      chartData(){
+        this.expressionInfoData=[];
      }
    },
    data(){
      return{
-        expressionsData:[],
-        show:true,
-        total:0,
+        expressionInfoData:[]
      }
    },
    mounted(){
-      let index=0;
-      let arr=this.edgesArray.find(item=>item.id===this.lineId).expressions;
-      if(arr.length===0){return};
-      arr.forEach((item,i)=>{
-        if(index<11){
-          this.expressionsData.push({...item,value:[]})
+      console.log(this.chartData);
+      if(this.chartData.res.length>0){
+        this.chartData.res.forEach((item,index)=>{
+          if(item.status==='success'){
+            this.expressionInfoData=this.expressionInfoData.concat(item.data.result);
          }
-        item.value=item.value || [];
-        item.value.forEach((item1,j)=>{
-          index++;
-          if(index<11){
-            this.expressionsData[i].value.push(item1)
-          }
-        })
        });
-      this.total=index;
+        console.log(this.expressionInfoData);
+      }
    },
    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>
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/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();
+              }
+            });
          })
        });
      },
@@ -510,16 +517,14 @@
            Promise.all(promiseArr).then((res)=>{
              getTopology(this.topologyIndex).open(data);
              getTopology(this.topologyIndex).lock(1);
-            });
-
-
              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');
-          data=data?JSON.parse(data):{
+          this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
+            let data=res.data.topo;
+            if(!data.pens){
+              data={
                bkColor:'#FFFFFF',
                gridSize:10,
                gridColor:'#ededed',
                lineWidth:1,
                ruleColor:"#4e4e4e"
              };
+            }
            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,
-              y:this.$refs['topology-canvas'].offsetHeight/2-50
+              x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth/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.$put('/project/topo',{topo:JSON.stringify(topologyData),projectId:this.projectInfo.id}).then(res=>{
+            this.prevent_opt.save=false;
+            if(res.code===200){
+              this.$message({
+                message: this.$t("tip.saveSuccess"),
+                type: 'success'
+              });
              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;
                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)
    }
  }
--- a/nezha-fronted/src/components/page/dashboard/overview/overview2.vue
+++ b/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"
-                      :edgesArray="item.edgesArray"
-                      :viewsCenter="item.topo.viewsCenter"
+                      :obj="item"
+                      :fromOverView="true"
+                      :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=>{
-              temp.forEach((item,index)=>{
-                item.nodesArray=res[index]
-              });
            this.allProject=temp;
            this.topologyLoading=false;
-            });
          })
        })
      },