fix：修改tooltip的样式

nezha-fronted/src/components/charts/line-chart-block.vue

@@ -7,7 +7,7 @@
     <div class="resize-box resize-box-echarts" ref="resizeBox">
       <div class="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
         <loading :ref="'localLoading'+chartIndex"></loading>
-        <div :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.rule}" :id="'chartTitle'+chartIndex" class="clearfix chartTitle" v-if="chartTitleShow">
+        <div :class="{'drag-disabled': this.filter.from == $CONSTANTS.fromRoute.rule}" :id="'chartTitle'+chartIndex" class="clearfix chartTitle">
           <el-popover
             v-if="isError"
             placement="top-start"
@@ -38,9 +38,9 @@
             <el-dropdown-menu style="display: none"></el-dropdown-menu>
             <span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
               <span class="chart-title-text">{{chartData.title}}</span>
-              <span class="chart-title-icon" v-if="filter.from != $CONSTANTS.fromRoute.rule"><i :class="{'visible':caretShow,'hidden':!caretShow}" class="nz-icon nz-icon-xialaxuanze  "></i></span>
+              <span class="chart-title-icon" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow"><i :class="{'visible':caretShow,'hidden':!caretShow}" class="nz-icon nz-icon-xialaxuanze  "></i></span>
             </span>
-            <ul :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" :id="'dropdownUl'+chartIndex" slot="dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" v-if="filter.from != $CONSTANTS.fromRoute.rule"    v-show="dropdownMenuShow" >
+            <ul :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" :id="'dropdownUl'+chartIndex" slot="dropdown"  style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" v-if="filter.from != $CONSTANTS.fromRoute.rule&&chartTitleShow"    v-show="dropdownMenuShow" >
               <li v-show="!isExplore"  @click="refreshChart"  class="el-dropdown-menu__item">
                 <i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
               <li @click="editChart" class="el-dropdown-menu__item" v-has="`${from}_chart_toEdit`" v-show="!isExplore">

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

@@ -1,7 +1,7 @@
 <template>
-  <div style="display: flex;">
+  <div class="tooltip-box" style="display: flex;" v-if="chartData.tooltipShow">
     <span class="temp-dom"></span>
-    <div style="width: 400px;height: 400px;" v-if="chartData.displayChart">
+    <div class="tooltip-box-chart" style="" v-if="chartData.displayChart&&chartData.tooltipShow">
       <line-chart-block v-if="chartData.type !== 'table'"
                         :key="'inner' + chartData.id"
                         :from="'project'"
@@ -12,7 +12,6 @@
                         :chart-index="0"
                         :chartTitleShow="false"
                         :chart-data="chartData">
-
       </line-chart-block>
     </div>
 
@@ -25,7 +24,9 @@
                   <!--:panel-id="-1"-->
                   <!--:chart-data="chartData"-->
                   <!--:chart-index="0"></chart-table>-->
-    <expression-info :chart-data="chartData"/>
+    <div class="tooltip-box-info">
+      <expression-info :chart-data="chartData" :filterTime="filterTime"/>
+    </div>
   </div>
 </template>
 
@@ -45,6 +46,7 @@
       chartDataParent:{
         type:Object,
       },
+      filterTime:{},
     },
     watch:{
       chartDataParent:{
@@ -58,10 +60,6 @@
     data(){
 		  return{
         tempDom: {height: 400, width: ""},
-        filterTime: [
-          bus.timeFormate(bus.getOffsetTimezoneData(-1),'yyyy-MM-dd hh:mm:ss'),
-          bus.timeFormate(bus.getOffsetTimezoneData(),'yyyy-MM-dd hh:mm:ss')
-        ],
         chartDataTemp:{"id":8832,"prev":null,"next":null,"panelId":0,"title":"123","span":12,"height":400,"createAt":"2021-01-27 07:36:19","type":"line","unit":2,"weight":0,"pid":null,"buildIn":null,"seq":null,"param":{"last":0,"legendValue":{"total":"off","min":"off","avg":"off","last":"off","max":"off"},"threshold":"","valueMapping":{"mapping":[{"color":{"bac":"#fff","text":"#000"},"text":"","value":""}],"type":"text"},"url":"","nullType":"connected"},"elements":[{"id":14926,"chartId":null,"expression":"cache_evictions_total","type":"expert","legend":"","buildIn":null,"seq":null},{"id":14927,"chartId":null,"expression":"appDevice","type":"expert","legend":"","buildIn":null,"seq":null}],"sync":null,"asset":null,"isLoaded":true,"from":"__vue_devtool_undefined__","draggable":true,"resizable":true,"editable":true},
         chartData:{},
         filter:{
@@ -148,6 +146,7 @@
             setTimeout(()=>{
               this.$nextTick(() => {
                 let res=chartItem.res;
+                console.log(res);
                 if (res.length > 0) {
                   let series = [];
                   let singleStatRlt = '';
@@ -391,10 +390,34 @@
 	}
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .temp-dom {
     visibility: hidden;
     font-size: 14px;
     position: fixed;
   }
+  .tooltip-box{
+    background: #FFFFFF;
+    box-shadow: 1px 2px 8px 0 rgba(0,0,0,0.11);
+    border-radius: 4px;
+    padding: 10px;
+    max-height: 400px;
+    min-height: 200px;
+    .tooltip-box-chart{
+      border: 1px solid #E7EAED;
+      width: 400px;
+      height: 400px;
+      margin-right: 10px;
+    }
+    .tooltip-box-info{
+      border: 1px solid #E7EAED;
+      background: #FFFFFF;
+      max-height: 400px;
+      min-height: 200px;
+      min-width: 186px;
+      max-width: 300px;
+    }
+  }
+
+
 </style>

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

@@ -1,27 +1,36 @@
 <template>
-  <div class="expressionInfo">
+  <div class="expression-info">
-    <div v-if="expressionInfoData.length===0">No Data</div>
+    <div class="expression-info-title">{{filterTime[1]}}</div>
-    <div v-if="expressionInfoData.length>0">
+    <div class="expression-info-content" v-if="expressionInfoData.length===0">No Data</div>
-      <el-row v-for="(item,index) in expressionInfoData" :key="index">
+    <div class="expression-info-content" v-if="expressionInfoData.length>0">
-        {{item.legend.alias}}
+      <el-row v-for="(item,index) in expressionInfoData" :key="index" v-if="index<20">
-        {{item.showValue}}
+        <el-col class="info-title" :span="18">{{item.legend.alias}}</el-col>
+        <el-col class="info-content" :span="6" :style="{background:computeData(item).fill,color:computeData(item).text}">{{item.showValue}}</el-col>
       </el-row>
     </div>
   </div>
 </template>
 
 <script>
-  import chartDataFormat from "@/components/charts/chartDataFormat";
   export default {
     name:"expressionInfo",
     props:{
       chartData:{
 
-      }
+      },
+      filterTime:{},
     },
     watch:{
       chartData(){
         this.expressionInfoData=[];
+        if(this.chartData.res.length>0){
+          this.chartData.res.forEach((item,index)=>{
+            if(item.status==='success'){
+              this.expressionInfoData=this.expressionInfoData.concat(item.data.result);
+            }
+          });
+          console.log(this.expressionInfoData);
+        }
       }
     },
     data(){
@@ -30,7 +39,6 @@
       }
     },
     mounted(){
-      console.log(this.chartData);
       if(this.chartData.res.length>0){
         this.chartData.res.forEach((item,index)=>{
           if(item.status==='success'){
@@ -41,7 +49,16 @@
       }
     },
     methods:{
-
+      computeData(item){
+        if(item.level){
+          return this.chartData.valueMapping.find((item2)=>item.level===item2.level).color
+        } else {
+          return {
+            fill:'#ffffff',
+            text:'#000000',
+          }
+        }
+      }
     },
     beforeDestroy(){
 
@@ -49,6 +66,38 @@
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-
+  .expression-info{
+    padding: 5px;
+    height: 100%;
+    font-size: 14px;
+    color: #666666;
+    letter-spacing: 0;
+    .expression-info-title{
+      font-size: 14px;
+      color: #333333;
+      letter-spacing: 0;
+      font-weight: 600;
+      line-height: 40px;
+      height: 40px;
+      border-bottom: 1px  dashed #DCE1E7;
+    }
+    .expression-info-content{
+      height: calc(100% - 60px);
+      overflow-y: auto;
+      padding:5px;
+    }
+    .info-title{
+      overflow: hidden;
+      padding-right: 10px;
+      text-overflow: ellipsis;
+      line-height: 20px;
+      font-weight: 500;
+      word-break:keep-all; /* 不换行 */
+      white-space:nowrap; /* 不换行 */
+    }
+    .info-content{
+      text-align: center;
+    }
+  }
 </style>

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

@@ -174,7 +174,7 @@
            v-if="tooltipPosition.show&&!editTopologyFlag"
            @mouseover="tooltipOver"
            @mouseout="tooltipOut">
-        <topoTooltip :chartDataParent="chartData"/>
+        <topoTooltip :chartDataParent="chartData" :filterTime="filterTime"/>
       </div>
     </div>
     <!--<div class="left-bottom" v-if="editTopologyFlag">-->
@@ -267,6 +267,7 @@
   export default {
     data(){
       return {
+        imgInit:false,//判断图片是否加载完成
         toolGroup:'基本形状',
         editFlag:true,
         tools:Tools,
@@ -423,6 +424,9 @@
         };
       }
     },
+    created(){
+      this.addNodeInit();
+    },
     mounted(){
       document.getElementById('topology-canvas'+this.topologyIndexF).addEventListener('mousemove',this.canvasMove);
       window.addEventListener('resize',this.winResize)
@@ -450,6 +454,7 @@
             let endTime=this.filterTime[1];
             let startTime=this.filterTime[0];
             let step=bus.getStep(startTime,endTime);
+            console.log(data);
             data.pens&&data.pens.forEach((item,index)=>{
               this.chartGetData.push({id:item.id,res:[]});
               let arr=item.data.expressArr.map((ele)=>{
@@ -499,6 +504,7 @@
             let endTime=this.filterTime[1];
             let startTime=this.filterTime[0];
             let step=bus.getStep(startTime,endTime);
+            console.log(data);
             data.pens&&data.pens.forEach((item,index)=>{
               this.chartGetData.push({id:item.id,res:[]});
               let arr=item.data.expressArr.map((ele)=>{
@@ -517,7 +523,11 @@
             Promise.all(promiseArr).then((res)=>{
               getTopology(this.topologyIndex).open(data);
               getTopology(this.topologyIndex).lock(1);
-              this.getNodesArr();
+              if(this.fromOverView){
+                getTopology(this.topologyIndex).centerView();
+                // getTopology(this.topologyIndex).fitView();
+                this.getNodesArr();
+              }
             });
           })
         });
@@ -532,7 +542,7 @@
           }
           getTopology(this.topologyIndex).data.projectId=this.obj.id;
           getTopology(this.topologyIndex).lock(1);
-          this.addNodeInit();
+
           this.getModule()//获取module
           resolve()
         })
@@ -542,7 +552,7 @@
         return new Promise(resolve=>{
           this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
             let data=res.data.topo;
-            if(!data.pens){
+            if(!res.data.topo || !data.pens){
               data={
                 bkColor:'#FFFFFF',
                 gridSize:10,
@@ -550,9 +560,24 @@
                 lineWidth:1,
                 ruleColor:"#4e4e4e"
               };
+              this.saveData={...data};
+              resolve(data);
+            }else{
+              let timer=setInterval(()=>{
+                if(!this.imgInit){
+                  return
+                }
+                clearInterval(timer);
+                data.pens.forEach((item=>{
+                  console.log(item,this.iconArray.find(item1=>item1.id==item.imageId))
+                  if(item.type===0&&item.data.imageId){
+                    item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image
+                  }
+                }))
+                this.saveData={...data};
+                resolve(data);
+              },100)
             }
-            this.saveData={...data};
-            resolve(data);
           })
         });
       },
@@ -595,12 +620,12 @@
             pen.animateType=selLevel.animateType;
             pen.font.color=selLevel.color.text;
             onChangeAnimateLine(pen,pen.animateType);
-            pen.font.color=selLevel.color.text;
           }
         } else {
           if(pen.type===0&&pen.animatePlay){// 判断valueMapping 给相应的状态
             onChangeAnimate(pen,pen.animateType);
           }else if(pen.type===1&&pen.animatePlay){// 判断valueMapping 给相应的状态
+            console.log(123123123);
             onChangeAnimateLine(pen,pen.animateType);
           }
         }
@@ -784,7 +809,7 @@
         setTimeout(()=>{
           this.dragFlag=true;
         },100);
-        event.dataTransfer.setData('Text',JSON.stringify(node.data));
+        event.dataTransfer.setData('Text',JSON.stringify({...node.data,data:{imageId:node.data.imageId}}));
       },
       dragFlagChange(node){
         getTopology(this.topologyIndex).addNode(
@@ -794,7 +819,8 @@
               ...node.data.rect,
               x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth/2-50,
               y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight/2-50
-            }
+            },
+            data:{imageId:node.data.imageId}
           });
         setTimeout(()=>{
           this.dragFlag=true;
@@ -802,7 +828,7 @@
       },
 
       onMessage(event,data){
-        // console.log('onMessage',event,data);
+        console.log('onMessage',event,data);
         // console.log(getTopology(this.topologyIndex))
         if(getTopology(this.topologyIndex)){
           this.cachesIndex=getTopology(this.topologyIndex).caches.index;
@@ -812,8 +838,9 @@
           ;
         }
         if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
-          if(data.type===0&& !data.data){
+          if(data.type===0&& !data.data.moduleId){
             data.data={
+              ...data.data,
               moduleId:'',
               moduleName:'',
               show:false,
@@ -889,15 +916,17 @@
         switch(event){
           case 'moveInNode':
           case 'moveInLine':
-            if(this.timer3){
+            // if(this.timer3){
-              clearTimeout(this.timer3);
+            //   clearTimeout(this.timer3);
-              this.timer3=null
+            //   this.timer3=null
-            }
+            // }
             this.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
             this.tooltipPosition.show=true;
             break;
           case 'moveOutNode':
           case 'moveOutLine':
+            this.tooltipPosition.show=false;
+            return
             if(!this.timer3){
               this.timer3=setTimeout(()=>{
                 this.tooltipPosition.show=false;
@@ -911,7 +940,6 @@
               },300)
             }
             break;
-
         }
         // 右侧输入框编辑状态时点击编辑区域其他元素，onMessage执行后才执行onUpdateProps方法，通过setTimeout让onUpdateProps先执行
         setTimeout(()=>{
@@ -1184,34 +1212,35 @@
         })
       },
 
-      addNodeInit(selImageId){
+      addNodeInit(){
         this.$get('/project/topo/icon').then(res=>{
           this.imgageLoading=true;
           this.tools[1].children=[];
+          let promiseArr=[];
           res.data.list.forEach((item,index)=>{
             item.imageName=item.name;
             delete item.name;
-            this.dealImg(`/project/topo/icon/${item.id}`).then((data)=>{
+            promiseArr.push( this.dealImg(`/project/topo/icon/${item.id}`));
-              item.image=data;
-              if(index===res.data.list.length-1){
-                setTimeout(()=>{
-                  this.iconArray=[...res.data.list];
-                  this.iconArray.forEach(item=>{
-                    this.tools[1].children.push({
-                      ...imageTemp,
-                      data:{
-                        ...imageTemp.data,
-                        text:item.imageName,
-                        image:item.image,
-                        imageId:item.id,
-                      }
-                    })
-                  });
-                  this.imgageLoading=false;
-                },100)
-              }
-            })
           });
+          Promise.all(promiseArr).then(res2=>{
+            this.iconArray=[...res.data.list];
+            this.iconArray.forEach((item,index)=>{
+              this.tools[1].children.push({
+                ...imageTemp,
+                data:{
+                  ...imageTemp.data,
+                  text:item.imageName,
+                  image:res2[index],
+                  imageId:item.id,
+                }
+              })
+              item.image=res2[index];
+            });
+            console.log(this.iconArray);
+            this.imgInit=true;
+          })
+
+
         })
       },
 
@@ -1302,7 +1331,7 @@
       },
       //保存
       saveTopology(){
-        let topologyData=getTopology(this.topologyIndex).data;
+        let topologyData=getTopology(this.topologyIndex).pureData();
         let flag=true;
         topologyData.pens.forEach(item=>{
           if(item.type===0&&((flag&& !item.data)||(flag&&item.data&& !item.data.moduleId))){
@@ -1311,8 +1340,15 @@
         });
         if(flag){
           this.editTopologyFlag=false;
-          localStorage.setItem('data',JSON.stringify(topologyData));
+          topologyData.pens.forEach(item=>{
-
+            if(item.type===0&&JSON.stringify(item.data.imageId)){
+              item.image="";
+              item.animateFrames=[];
+              item.animateReady=null;
+              delete  item.img;
+              delete  item.lastImage;
+            }
+          });
           this.$put('/project/topo',{topo:JSON.stringify(topologyData),projectId:this.projectInfo.id}).then(res=>{
             this.prevent_opt.save=false;
             if(res.code===200){
@@ -1328,7 +1364,6 @@
                 getTopology(this.topologyIndex).canvasPos=domRect;
                 this.reload();
               })
-              this.getNodesArr();
             }
           }).catch(res=>{
             this.prevent_opt.save=false;
@@ -1380,14 +1415,14 @@
         this.tooltipPosition.left=e.offsetX+20;
       },
       tooltipOver(){
-        clearTimeout(this.timer3);
+        // clearTimeout(this.timer3);
-        this.timer3=null
+        // this.timer3=null
       },
       tooltipOut(){
-        this.timer3=setTimeout(()=>{
+        // this.timer3=setTimeout(()=>{
-          this.tooltipPosition.show=false;
+        //   this.tooltipPosition.show=false;
-          this.timer3=null
+        //   this.timer3=null
-        },300)
+        // },300)
       },
       nodeDefaultWidth(nodeName){
         switch(nodeName){
@@ -1402,7 +1437,9 @@
     destroyed(){
       getTopology(this.topologyIndex).destroy();
       setTopology(this.topologyIndex,null);
-      document.getElementById('topology-canvas'+this.topologyIndexF).removeEventListener('mousemove',this.canvasMove);
+      if(document.getElementById('topology-canvas'+this.topologyIndexF)){
+       document.getElementById('topology-canvas'+this.topologyIndexF).removeEventListener('mousemove',this.canvasMove);
+      }
       window.removeEventListener('resize',this.winResize)
     }
   }