From f6e7537c0b17df4e832de5a6d25aa3c10d321676 Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Tue, 15 Sep 2020 15:37:01 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=B7=BB=E5=8A=A0=E7=BA=BF?=
 =?UTF-8?q?=E7=9A=84=E7=B1=BB=E5=9E=8B=EF=BC=8C=E6=82=AC=E6=B5=AE=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BAexpressions=E6=95=B0=E6=8D=AE=EF=BC=8C=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E8=BF=94=E5=9B=9E=E6=95=B0=E6=8D=AE=E7=9A=84=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/pickTime.vue        | 13 +++-
 .../src/components/common/project/addLine.vue | 41 ++++++++++-
 .../common/project/popData/expressionInfo.vue | 70 +++++++++++++++++--
 .../common/project/popData/lineChart.vue      |  2 +-
 .../common/project/popData/totalChart.vue     |  3 +-
 .../components/common/project/topology.vue    | 50 ++++++++++---
 .../components/common/project/visNetwork.vue  | 49 ++++++++++---
 7 files changed, 196 insertions(+), 32 deletions(-)

diff --git a/nezha-fronted/src/components/common/pickTime.vue b/nezha-fronted/src/components/common/pickTime.vue
index ffd76b29a..fee4975d3 100644
--- 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();
diff --git a/nezha-fronted/src/components/common/project/addLine.vue b/nezha-fronted/src/components/common/project/addLine.vue
index 1b56379f7..31afe284c 100644
--- 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=[];
diff --git a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
index 1a81983dc..869026010 100644
--- a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
+++ b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
@@ -1,26 +1,84 @@
 <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)
       }
     }
-	}
+  }
 </script>
 
 <style scoped>
 .expressionInfo{
   position: absolute;
-  top:50%;
-  left: 50%;
+  transform: translateX(20px);
+  min-height: 20px;
+  max-height: 200px;
+  overflow: hidden;
 }
 </style>
diff --git a/nezha-fronted/src/components/common/project/popData/lineChart.vue b/nezha-fronted/src/components/common/project/popData/lineChart.vue
index 6932aa76b..891acea86 100644
--- 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 {
diff --git a/nezha-fronted/src/components/common/project/popData/totalChart.vue b/nezha-fronted/src/components/common/project/popData/totalChart.vue
index 99e91002c..7db09eebf 100644
--- 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>
diff --git a/nezha-fronted/src/components/common/project/topology.vue b/nezha-fronted/src/components/common/project/topology.vue
index 2a6aa7be9..d06940169 100644
--- 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>
diff --git a/nezha-fronted/src/components/common/project/visNetwork.vue b/nezha-fronted/src/components/common/project/visNetwork.vue
index eb8369fde..553d26db7 100644
--- 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,10 +161,12 @@
       projectInfo:{
         immediate: true,
         handler(n){
-          this.getNetworkData(n);
-          this.total=this.projectInfo.alertStat[0]+this.projectInfo.alertStat[1]+this.projectInfo.alertStat[2];
-          if(!this.total){
-            this.total=0;
+          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;
+            }
           }
         },
       },
@@ -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>