feat：添加线的类型，悬浮显示expressions数据，处理返回数据的格式

2020-09-15 15:37:01 +08:00
parent 862ca15944
commit f6e7537c0b
7 changed files with 196 additions and 32 deletions
--- a/nezha-fronted/src/components/common/pickTime.vue
+++ b/nezha-fronted/src/components/common/pickTime.vue
@@ -1,6 +1,6 @@
 <template>
  <div class="interval-refresh ">
-    <time-picker ref="timePicker" class="time-picker" @change="dateChange"></time-picker>
+    <time-picker v-if="showTimePicker" ref="timePicker" class="time-picker" @change="dateChange"></time-picker>
    <chart-unit v-model="unit" v-if="useChartUnit"></chart-unit>
      <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh" style="height: 24px;line-height: 24px;vertical-align: middle;">
        <button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc">
@@ -51,6 +51,10 @@
      useChartUnit:{
        type:Boolean,
        default:true,
+      },
+      showTimePicker:{
+        type:Boolean,
+        default:true,
      }
    },
    data(){
@@ -71,6 +75,13 @@
        this.visible = false;
        clearInterval(this.intervalTimer);
        this.interval = val;
+        if(!this.showTimePicker){
+          this.intervalTimer = setInterval(() => {
+            this.$emit('change',this.searchTime)
+            this.refreshDataFunc();
+          }, val.value * 1000);
+          return
+        }
        if (val && val.value != -1) {
          const start = new Date(this.searchTime[1]);
          const now = bus.getOffsetTimezoneData();
--- a/nezha-fronted/src/components/common/project/addLine.vue
+++ b/nezha-fronted/src/components/common/project/addLine.vue
@@ -144,6 +144,39 @@
                </el-color-picker>
              </div>
            </el-form-item>
+            <el-form-item :label="'线型'" prop="type" class="type">
+              <el-select v-model="form.type" placeholder="" :popper-append-to-body="false"  size="small">
+                <el-option label="dynamic" value="dynamic">
+                  dynamic
+                </el-option>
+                <el-option label="continuous" value="continuous">
+                  continuous
+                </el-option>
+                <el-option label="discrete" value="discrete">
+                  discrete
+                </el-option>
+                <el-option label="diagonalCross" value="diagonalCross">
+                  diagonalCross
+                </el-option>
+                <el-option label="diagonalCross" value="diagonalCross">
+                  diagonalCross
+                </el-option>
+                <el-option label="straightCross" value="straightCross">
+                  straightCross
+                </el-option>
+                <el-option label="horizontal" value="horizontal">
+                  horizontal
+                </el-option>
+                <el-option label="vertical" value="vertical">
+                  vertical
+                </el-option>
+                <el-option label="curvedCW" value="curvedCW">
+                  curvedCW
+                </el-option>
+
+
+              </el-select>
+            </el-form-item>
          </div>
          <div  class="right-box-sub-title">
            <span>{{$t('alert.config.expr')}}</span>
@@ -253,9 +286,10 @@
            color:n.color,
            lineId:n.id,
            width:n.width,
-            lineName:n.label,
+            lineName:n.name,
            name:[],
            dashes:!n.dashes?n.dashes:JSON.stringify(n.dashes),
+            type:n.smooth.type,
            // dashes:!n.dashes?n.dashes:JSON.stringify([n.dashes[2],n.dashes[2]]),
          };
         if( n.expressions){
@@ -329,11 +363,12 @@
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let model=Object.assign({id:this.form.lineId?this.form.lineId:undefined},{...this.form},{color: {color:this.form.color,highlight:this.form.color,hover:this.form.color,opacity:1.0}});
-            model.label=this.form.lineName;
+            // model.label=this.form.lineName;
+            model.name=this.form.lineName;
            model.width = parseInt(model.width) || 4;
            model.smooth={
              roundness:(Math.random()*8 +1)/10 ,//获取0.1-0.9之间的随机数
-              type:'curvedCW',
+              type:this.form.type,
            };
            model.dashes=!model.dashes?model.dashes:JSON.parse(model.dashes);
            model.expressions=[];
--- a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
+++ b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
@@ -1,17 +1,73 @@
 <template>
-  <div class="expressionInfo">
+  <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">
+        <div  v-for="(item,index) in expressionsData">
+          {{item.name}}
+          <div v-for="item1 in item.value">
+            {{item.legend?item.legend:item.metric}}:
+            {{dataFormat(item.unit,item1.value[0])}}
+          </div>
+          <div v-if="item.value.length===0">
+           NoData
+          </div>
+        </div>
+      </div>
+      <div></div>
+    </el-tooltip>
  </div>
 </template>

 <script>
+  import chartDataFormat from "@/components/charts/chartDataFormat";
 	export default {
 		name:"expressionInfo",
    props:{
-
+      lineId:{required:true},
+      edgesArray:{},
+      expressionsInfoPosition:{},
+    },
+    watch:{
+      expressionsInfoPosition:{
+        deep:true,
+        immediate: true,
+        handler(n){
+          this.show=false;
+          this.expressionsInfoPosition=n;
+          this.$nextTick(()=>{
+            this.show=true;
+          })
+        }
+      }
    },
    data(){
 		  return{
-
+        expressionsData:[],
+        show:true,
+      }
+    },
+    mounted(){
+		  let index=0;
+      let arr=this.edgesArray.find(item=>item.id===this.lineId).expressions;
+      if(arr.length===0){return};
+      console.log(arr);
+      arr.forEach((item,i)=>{
+        if(index<21){
+          this.expressionsData.push({...item,value:[]})
+        }
+        item.value.forEach((item1,j)=>{
+          index++;
+          if(index<21){
+            console.log();
+            this.expressionsData[i].value.push(item1)
+          }
+        })
+      });
+      console.log(this.expressionsData);
+    },
+    methods:{
+      dataFormat(unit,value){
+        return chartDataFormat.getUnit(unit?unit:2).compute(value)
      }
    }
  }
@@ -20,7 +76,9 @@
 <style scoped>
 .expressionInfo{
  position: absolute;
-  top:50%;
-  left: 50%;
+  transform: translateX(20px);
+  min-height: 20px;
+  max-height: 200px;
+  overflow: hidden;
 }
 </style>
--- a/nezha-fronted/src/components/common/project/popData/lineChart.vue
+++ b/nezha-fronted/src/components/common/project/popData/lineChart.vue
@@ -739,7 +739,7 @@
          this.legendListMore=this.legendList.filter((item,index)=>index<this.seriesLength);
          this.$nextTick(() => {
            setTimeout(function () {
-              let divHeight = self.$refs.legendArea.offsetHeight;
+              let divHeight = 111;
              if(!chartInfo.height){
                self.echartStore.resize({height:228});
              }else {
--- a/nezha-fronted/src/components/common/project/popData/totalChart.vue
+++ b/nezha-fronted/src/components/common/project/popData/totalChart.vue
@@ -630,7 +630,7 @@
                      filter: this.filter,
                      filterType: filterType,
                      errorMsg: errorMsg,
-                    }
+                    };
                    this.chartDataCacheGroup.set(chartInfo.id, chartData);
                    if (chartItem.type === 'table') {//表格
                      if (filterType === 'showFullScreen') {//全屏查询
@@ -727,5 +727,6 @@
    position: relative;
    max-height: calc(100vh - 100px);
    padding: 3px 15px 50px 15px;
+    z-index: 0;
  }
 </style>
--- a/nezha-fronted/src/components/common/project/topology.vue
+++ b/nezha-fronted/src/components/common/project/topology.vue
@@ -84,7 +84,10 @@
        <!--<div @click='zoomChange(-0.1)'><i class="nz-icon nz-icon-hexagonBorder zoom-icon"></i></div>-->
      <!--</div>-->
      <expression-info
-      v-if="expressionsInfoShow"
+        v-if="expressionsInfoShow&&!editVisNetwork"
+        :lineId="lineId"
+        :edgesArray="edgesArray"
+        :expressionsInfoPosition="expressionsInfoPosition"
      ></expression-info>
    </div>
    <transition name="right-box">
@@ -208,11 +211,17 @@
    },
    data(){
 		  return {
+        screenX:window.screen.width,
+        lineId:'',
 		    canvas:'',
        totalId:'',
        totalArray:[],
        allModuleInfos:[],
        relativeModelTop:{},
+        expressionsInfoPosition:{
+          x:0,
+          y:0,
+        },
        moduleDataS:[],
        index:'',
        zoom:1,
@@ -283,12 +292,13 @@
      saveTopology(){
        let nodes=this.formatNodes([...this.nodesArray]);
        let edges=this.formatEdges([...this.edgesArray]);
-        this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges,viewsCenter:this.viewsCenter,zoom:this.zoom}),projectId:this.allModuleInfo.basic.id}).then(res=>{
+        this.$put('/project/topo',{topo:JSON.stringify({nodes:nodes,lines:edges,viewsCenter:this.viewsCenter,zoom:(this.zoom*1920/this.screenX)}),projectId:this.allModuleInfo.basic.id}).then(res=>{
          if(res.code===200){
            this.$message({
              message: this.$t("tip.saveSuccess"),
              type: 'success'
            });
+            this.$emit('reload');
          }
        }).catch(res=>{
          this.$message({
@@ -321,7 +331,7 @@
        let arr1=[];
        arr.forEach(item=>{
          let obj={
-            "name": item.label,
+            "name": item.name,
            "width": item.width,
            "arrows": item.arrows,
            "color": item.color,
@@ -372,7 +382,7 @@
          edges: {
            width: 2,
            smooth:{  //设置两个节点之前的连线的状态
-              enabled: false,//默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
+              enabled: true,//默认是true，设置为false之后，两个节点之前的连线始终为直线，不会出现贝塞尔曲线
              roundness:1,
              type: "dynamic",
            },
@@ -384,12 +394,13 @@
            arrowStrikethrough:false,
            chosen:{
              edge:(values, id, selected, hovering)=>{
+                // console.log(values, id, selected, hovering);
                if(this_.hoverEdge){
                  values.middleArrow=true;
                  values.middleArrowScale=1;
                  values.middleArrowType='circle';
                  this_.expressionsInfoShow=true;
-                  console.log(values);
+                  // console.log(values);
                }
              },
              // label:(values, id, selected, hovering)=>{
@@ -639,6 +650,13 @@
          this.setPopPosition(this.selNodeId);
        }
      },
+      modelTopMouseMoveEdge(e){
+        let position={
+          x:e.layerX,
+          y:e.layerY,
+        };
+        this.expressionsInfoPosition=position;
+      },
      modelTopClick(item,index){
        this.index=index;
        this.selNodeId=item.id;
@@ -802,16 +820,21 @@
           // this_.addLineShow=true;
         });

-         this.network.on("hoverEdge", function (params,a) { // 悬停边
+         this.network.on("hoverEdge", function (params) { // 悬停边
           this_.hoverEdge=true;
           this_.cursorMove=true;
-           console.log(params,a);
+           this_.lineId=params.edge;
+           this_.$refs['network'].addEventListener('mousemove',this_.modelTopMouseMoveEdge);
+           // console.log(params,'hoverEdge');
         });

-         this.network.on("blurEdge", function () { // 边失去焦点
+         this.network.on("blurEdge", function (params) { // 边失去焦点
           this_.hoverEdge=false;
           this_.cursorMove=false;
           this_.expressionsInfoShow=false;
+           this_.lineId='';
+           this_.$refs['network'].removeEventListener('mousemove',this_.modelTopMouseMoveEdge);
+           // console.log(params,'blurEdge');
         });

         this.network.on("dragStart", function (params) {//节点移动开始
@@ -860,7 +883,7 @@

         this.network.on("hoverNode", function () {//hoverNode
           this_.cursorMove=true;
-           console.log(123123123);
+           // console.log(123123123);
         });

         this.network.on("blurNode", function () {//blurNode
@@ -1016,6 +1039,10 @@
    font-size: 18px;
    font-weight: bold;
    height: 28px;
+    position: absolute;
+    top: 15px;
+    width: calc(100% - 160px);
+    z-index: 10;
  }
  .edit-topology-module,.edit-topology-line-cancel{
    margin-left: 30px;
@@ -1083,7 +1110,7 @@
  .network-info{
    position: absolute;
    right: 0;
-    top: 0;
+    top: 50px;
  }
  .saveTopology{
    background-image: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%);
@@ -1107,4 +1134,7 @@
  .zoom-icon{
    font-size: 42px;
  }
+  #network_id /deep/ .vis-network{
+    outline: none;
+  }
 </style>
--- a/nezha-fronted/src/components/common/project/visNetwork.vue
+++ b/nezha-fronted/src/components/common/project/visNetwork.vue
@@ -4,7 +4,7 @@
    <div class="resize-box resize-box-table" ref="resizeBox">
      <div class="vis-network" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
        <loading :ref="'localLoading'+chartIndex"></loading>
-        <div class="clearfix text-right" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
+        <div class="clearfix text-right edit-visnetwork" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
          <el-popover
            v-if="isError"
            :close-delay=10
@@ -25,7 +25,7 @@
              </span>
              <div style="height: 34px">
                <i class="nz-icon nz-icon-edit float-right "  @click="editVisNetworkChange(true)" v-show="!editVisNetwork" :title="$t('project.topology.edit')"></i>
-                <i class="nz-icon nz-icon-refresh float-right"  @click="reload" v-show="!editVisNetwork" :title="$t('project.topology.refresh')"></i>
+                <pick-time v-show="!editVisNetwork" :showTimePicker="false" class="float-right pickTime" :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false"></pick-time>
                <!--<i class="nz-icon nz-icon-zoomin float-right"></i>-->
                <!--<i class="nz-icon nz-icon-exit-full-screen float-right"></i>-->
              </div>
@@ -128,6 +128,7 @@
  import timePicker from '@/components/common/timePicker';
  import topology from './topology'
  import cytoscape from './cytoscape'
+  import bus from '@/libs/bus';
  // import other from './other'
  export default {
    name: 'visNetwork',
@@ -160,11 +161,13 @@
      projectInfo:{
        immediate: true,
        handler(n){
+          if(n.id){
            this.getNetworkData(n);
            this.total=this.projectInfo.alertStat[0]+this.projectInfo.alertStat[1]+this.projectInfo.alertStat[2];
            if(!this.total){
              this.total=0;
            }
+          }
        },
      },
      // alertData:{
@@ -189,6 +192,8 @@
        editVisNetwork:false,
        topologyLoading:false,
        total:1,
+        searchTime: bus.getTimezontDateRange(),
+        screenX:window.screen.width,
      }

    },
@@ -217,7 +222,7 @@
            },500)
          }
          this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
-          this.$refs['topology'].zoom=res.data.topo.zoom?res.data.topo.zoom:1;
+          this.$refs['topology'].zoom=res.data.topo.zoom?(res.data.topo.zoom*this.screenX/1920):1;
          this.$refs['topology'].selNodeId='';
        })
      },
@@ -239,7 +244,7 @@
            },500)
          }
          this.$refs['topology'].viewsCenter=res.data.topo.viewsCenter?res.data.topo.viewsCenter:{x:0,y:0};
-          this.$refs['topology'].zoom=res.data.topo.zoom?res.data.topo.zoom:1;
+          this.$refs['topology'].zoom=res.data.topo.zoom?(res.data.topo.zoom*this.screenX/1920):1;
          this.$refs['topology'].selNodeId='';
        })
      },
@@ -275,10 +280,19 @@
        let arr1=[];
        if(!arr){return arr1}
        arr.forEach((item,index)=>{
+          console.log(item);
          item.from=item.source;
          item.to=item.target;
          item.label='';
          item.title='title';
+          item.expressions.forEach((item,index)=>{
+            this.$get('/prom/api/v1/query?query=' + item.metric).then(res=>{
+              // item.value=res.data.result[0].value;i
+              item.value=res.data.result;
+              console.log(res);
+            });
+          })
+
          // item.dashes=(item.dashes?(new Array(100).fill(item.dashes[0])):item.dashes);
          // if(index%2==0&&item.dashes){
          //   item.dataFlow='left';
@@ -288,6 +302,7 @@
          //   item.dataFlow='right'
          // }
        });
+        console.log(arr);
        return arr
      },
      dealImg(url) {
@@ -321,7 +336,13 @@
        if(!flag){
          // this.reload();
        }
+      },
+      dateChange(val) {
+        if(editVisNetwork)  {
+          return
        }
+        this.reload();
+      },
    },

    mounted(){
@@ -335,6 +356,9 @@
  @import './chart.scss';
 </style>
 <style scoped>
+  .pickTime{
+    margin-top: 10px;
+  }
  .facade-top /deep/.active-icon{
    margin-top: 0;
  }
@@ -471,5 +495,10 @@
  .label{
    padding: 0 15px 0 0;
  }
-
+  .edit-visnetwork{
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 1;
+  }
 </style>