feat：修改首页加载方式

2021-02-04 18:01:57 +08:00
parent d817ee3be7
commit 15df380a10
3 changed files with 65 additions and 43 deletions
--- a/nezha-fronted/src/components/common/project/L5/services/canvas.js
+++ b/nezha-fronted/src/components/common/project/L5/services/canvas.js
@@ -311,7 +311,7 @@ export function myCubeAnchors(node) {//立方体锚点



-export function onChangeAnimate(node,animateType) {
+export function onChangeAnimate(node,animateType,fillStyle,strokeStyle) {
  if (node.animateType === 'custom') {
    return;
  }
@@ -392,7 +392,7 @@ export function onChangeAnimate(node,animateType) {
      });
      break;
    case 'success':
-      state.strokeStyle = '#237804';
+      state.strokeStyle =  strokeStyle?strokeStyle:'#237804';
      node.animateFrames.push({
        duration: 100,
        linear: true,
@@ -414,8 +414,8 @@ export function onChangeAnimate(node,animateType) {
        linear: true,
        state: Node.cloneState(node)
      });
-      state.strokeStyle = '#237804';
-      state.fillStyle = '#389e0d22';
+      state.strokeStyle = strokeStyle?strokeStyle: '#237804';
+      state.fillStyle = fillStyle?fillStyle:'#389e0d22';
      node.animateFrames.push({
        duration: 3000,
        linear: true,
@@ -423,8 +423,8 @@ export function onChangeAnimate(node,animateType) {
      });
      break;
    case 'warning':
-      state.strokeStyle = '#fa8c16';
-      state.fillStyle = '#fa8c16';
+      state.strokeStyle = strokeStyle?strokeStyle:'#fa8c16';
+      state.fillStyle = fillStyle?fillStyle:'#fa8c16';
      state.lineWidth=5;
      state.dash = 2;
      node.animateFrames.push({
@@ -432,7 +432,7 @@ export function onChangeAnimate(node,animateType) {
        linear: true,
        state
      });
-      state.strokeStyle = '#fa8c16';
+      state.strokeStyle = strokeStyle?strokeStyle: '#fa8c16';
      state.dash = 0;
      state.lineWidth=1;
      state.fillStyle = '#ffffff';
@@ -441,10 +441,10 @@ export function onChangeAnimate(node,animateType) {
        linear: true,
        state: Node.cloneState(state)
      });
-      state.strokeStyle = '#fa8c16';
+      state.strokeStyle = strokeStyle?strokeStyle: '#fa8c16';
      state.dash = 2;
      state.lineWidth=5;
-      state.fillStyle = '#fa8c16';
+      state.fillStyle = fillStyle?fillStyle: '#fa8c16';
      node.animateFrames.push({
        duration: 300,
        linear: true,
@@ -452,8 +452,8 @@ export function onChangeAnimate(node,animateType) {
      });
      break;
    case 'error':
-      state.strokeStyle = '#cf1322';
-      // state.fillStyle = '#cf132222';
+      state.strokeStyle = strokeStyle?strokeStyle: '#cf1322';
+      state.fillStyle = fillStyle?fillStyle:'#cf132222';
      state.lineWidth=5;
      state.dash = 2;
      node.animateFrames.push({
@@ -461,7 +461,8 @@ export function onChangeAnimate(node,animateType) {
        linear: true,
        state
      });
-      state.strokeStyle = '#cf1322';
+      state.strokeStyle = strokeStyle?strokeStyle:'#cf1322';
+      state.fillStyle = '#ffffff';
      state.dash = 0;
      state.lineWidth=1;
      node.animateFrames.push({
@@ -469,7 +470,8 @@ export function onChangeAnimate(node,animateType) {
        linear: true,
        state: Node.cloneState(state)
      });
-      state.strokeStyle = '#cf1322';
+      state.strokeStyle = strokeStyle?strokeStyle: '#cf1322';
+      state.fillStyle = fillStyle?fillStyle:'#cf132222';
      state.dash = 2;
      state.lineWidth=5;
      node.animateFrames.push({
@@ -479,14 +481,14 @@ export function onChangeAnimate(node,animateType) {
      });
      break;
    case 'show':
-      state.strokeStyle = '#fa541c';
-      state.rotate = -10;
+      state.strokeStyle = strokeStyle?strokeStyle: '#fa541c';
+      state.rotate = -5;
      node.animateFrames.push({
        duration: 100,
        linear: true,
        state: Node.cloneState(state)
      });
-      state.rotate = 10;
+      state.rotate = 5;
      node.animateFrames.push({
        duration: 100,
        linear: true,
--- a/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
+++ b/nezha-fronted/src/components/common/project/popData/expressionInfo.vue
@@ -4,7 +4,7 @@
    <div class="expression-info-content" v-if="expressionInfoData.length===0">No Data</div>
    <div class="expression-info-content" v-if="expressionInfoData.length>0">
      <el-row v-for="(item,index) in expressionInfoData" :key="index" v-if="index<20">
-        <el-col class="info-title" :span="18">{{item.legend.alias}}</el-col>
+        <el-col class="info-title" :span="18" :title="item.legend.name">{{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>
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -3,7 +3,7 @@
  @import "./L5/css/props.css";
 </style>
 <template>
-  <div class="project-box">
+  <div class="project-box" v-loading="topologyLoading">
    <div class="project-title" v-if="showTopTools&&!fromOverView">
      <div v-show="editTopologyFlag" class="edit-topologyLine">
        <!--工具栏-->
@@ -128,7 +128,7 @@
    </div>
    <div class="page">
      <!--画布部分-->
-      <div :id="'topology-canvas' + topologyIndexF" class="full" ref="topology-canvas"></div>
+      <div :id="'topology-canvas' + topologyIndexF" class="full" :ref="'topology-canvas'+ topologyIndexF"></div>
      <!--设置属性-->
      <div class="props" v-if="editTopologyFlag&&toolShow.attr">
        <CanvasProps :selection.sync="props"
@@ -272,6 +272,7 @@
        editFlag:true,
        tools:Tools,
        props:{},
+        topologyLoading:false,
        contextmenu:{
          left:null,
          top:null,
@@ -395,14 +396,18 @@
        immediate:true,
        handler(n){
          if(n){
+            this.editTopologyFlag=false;
+            this.topologyLoading=true;
            if(!this.timer){
              this.timer=setTimeout(()=>{
+                this.topologyLoading=true;
                this.init();
                this.timer=null
              },300)
            }else{
              clearTimeout(this.timer);
              this.timer=setTimeout(()=>{
+                this.topologyLoading=true;
                this.init();
                this.timer=null
              },300)
@@ -474,7 +479,22 @@
              getTopology(this.topologyIndex).open(data);
              getTopology(this.topologyIndex).lock(1);
              if(this.fromOverView){
-                getTopology(this.topologyIndex).centerView();
+                let flag=false;
+
+                let position={
+                  x:this.$refs['topology-canvas'+this.topologyIndexF].offsetWidth,
+                  y:this.$refs['topology-canvas'+this.topologyIndexF].offsetHeight,
+                }
+                getTopology(this.topologyIndex).centerView(50);
+                getTopology(this.topologyIndex).data.pens.forEach(item=>{
+                  if(flag){
+                    return
+                  }
+                  if(item.rect.x>position.x || item.rect.y>position.y){
+                    getTopology(this.topologyIndex).fitView(50);
+                    flag=true
+                  }
+                });
                // getTopology(this.topologyIndex).fitView();
                this.getNodesArr();
              }
@@ -523,11 +543,6 @@
            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();
-              }
            });
          })
        });
@@ -536,6 +551,7 @@
        return new Promise(resolve=>{
          let canvas=new Topology('topology-canvas'+this.topologyIndexF,canvasOptions);
          canvas.open(data);
+          this.topologyLoading=false;
          setTopology(this.topologyIndex,canvas);
          if(!getTopology(this.topologyIndex).data.name){
            getTopology(this.topologyIndex).data.name=this.obj.name;
@@ -611,6 +627,8 @@
          if(pen.type===0){// 判断valueMapping 给相应的状态
            let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
            pen.font.color=selLevel.color.text;
+            pen.fillStyle=selLevel.color.fill;
+            pen.strokeStyle=selLevel.color.line;
            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);
@@ -705,7 +723,6 @@
      //获取module
      getModule(){
        this.projectInfo.loading=true;
-        // this.$refs['visNetwork'].topologyLoading=true;
        this.$get('project/info',{id:this.obj.id}).then(response=>{
          if(response.code===200){
            this.projectInfo.loading=false;
@@ -827,7 +844,7 @@
        },100);
      },

-      onMessage(event,data){
+      onMessage(event,data,e){
        console.log('onMessage',event,data);
        // console.log(getTopology(this.topologyIndex))
        if(getTopology(this.topologyIndex)){
@@ -916,28 +933,31 @@
        switch(event){
          case 'moveInNode':
          case 'moveInLine':
-            // if(this.timer3){
-            //   clearTimeout(this.timer3);
-            //   this.timer3=null
-            // }
+            if(this.timer3){
+              clearTimeout(this.timer3);
+              this.timer3=null
+            }
            this.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
+            this.tooltipPosition.show=false;
+            setTimeout(()=>{
              this.tooltipPosition.show=true;
+            },50);
            break;
          case 'moveOutNode':
          case 'moveOutLine':
-            this.tooltipPosition.show=false;
-            return
+            // this.tooltipPosition.show=false;
+            // return
            if(!this.timer3){
              this.timer3=setTimeout(()=>{
                this.tooltipPosition.show=false;
                this.timer3=null
-              },300)
+              },150)
            }else{
              clearTimeout(this.timer3);
              this.timer3=setTimeout(()=>{
                this.tooltipPosition.show=false;
                this.timer3=null
-              },300)
+              },150)
            }
            break;
        }
@@ -1408,21 +1428,21 @@
        getTopology(this.topologyIndex).centerView();
      },
      canvasMove(e){// 画布上的移动 确定tooltip的位置
-        if(!this.tooltipPosition.show||this.timer3){
+        if(this.tooltipPosition.show){
          return
        }
        this.tooltipPosition.top=e.offsetY;
        this.tooltipPosition.left=e.offsetX+20;
      },
      tooltipOver(){
-        // clearTimeout(this.timer3);
-        // this.timer3=null
+        clearTimeout(this.timer3);
+        this.timer3=null
      },
      tooltipOut(){
-        // this.timer3=setTimeout(()=>{
-        //   this.tooltipPosition.show=false;
-        //   this.timer3=null
-        // },300)
+        this.timer3=setTimeout(()=>{
+          this.tooltipPosition.show=false;
+          this.timer3=null
+        },150)
      },
      nodeDefaultWidth(nodeName){
        switch(nodeName){