feat ：样式调整 （90%）

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

@@ -9,17 +9,24 @@
     <!--<div> 保存为图片 </div>-->
     <div class="top-tool-item" @click="del">  <i class="nz-icon nz-icon-delete"/> </div>
     <div class="top-tool-item top-tool-item-scale">
-      <el-input-number
+      <span class="scale-number">
-        size="mini"
+          <span class="scale-number-minus scale-number-symbol" @click="changeScale(-25)">-</span>
-        v-model="scaleNum"
+          <el-popover
-        :max="500"
+            placement="bottom"
-        :min="25"
+            width="111"
-        :step="20"
+            trigger="click"
-        :precision="0"
+            class="scale-number-box"
-        id="scaleNum"
+            popper-class="scale-number-popover"
-        @change="scale">
+           >
-      </el-input-number>
+            <div class="scale-num-pop" style=" width: 91px;min-width: 91px">
-      <span class="percent">%</span>
+              <div @click="scale(50)" :class="['scale-num-pop',scaleNum==50?'is-active':'']">50</div>
+              <div @click="scale(100)" :class="['scale-num-pop',scaleNum==100?'is-active':'']">100</div>
+              <div @click="scale(200)" :class="['scale-num-pop',scaleNum==200?'is-active':'']">200</div>
+            </div>
+            <span class="scale-number-content" slot="reference">{{scaleNum}}%</span>
+          </el-popover>
+          <span class="scale-number-add scale-number-symbol" @click="changeScale(25)">+</span>
+        </span>
     </div>
     <!--<div class="top-tool-item" @click="clear"> 清空画布 </div>-->
 
@@ -105,7 +112,18 @@
       fitView(){//自适应画布大小
         getTopology(this.index).fitView();
       },
+      changeScale(num){
+        this.scaleNum+=num;
+        if(this.scaleNum<25){
+          this.scaleNum=25
+        }
+        if(this.scaleNum>400){
+          this.scaleNum=400
+        }
+        this.scale(this.scaleNum)
+      },
       scale(val){
+        this.scaleNum=val;
         getTopology(this.index).scaleTo(val/100);
       },
       del(){
@@ -124,7 +142,26 @@
     }
   }
 </script>
-
+<style lang="scss">
+  .scale-number-popover{
+    width: 111px;
+    min-width: 111px;
+    .el-popover{
+      width: 100%;
+    }
+  }
+  .scale-number-popover .scale-num-pop{
+    text-align: center;
+    font-size: 14px;
+    color: #666666;
+    font-weight: 400;
+    width: 91px;
+    cursor: pointer;
+  }
+  .scale-number-popover .scale-num-pop.is-active{
+    color: #FA901C;
+  }
+</style>
 <style lang="scss" scoped>
   .tool-top {
     border-radius: 2px;
@@ -153,6 +190,35 @@
       left: 68px;
       font-size:12px ;
     }
+    .scale-number{
+      width: 91px;
+      display: flex;
+      height: 30px;
+      line-height: 30px;
+      position: relative;
+      padding: 0 10px;
+      justify-content: space-between;
+      .scale-number-content{
+        width: 59px;
+        height: 100%;
+        text-align: center;
+        font-size: 12px;
+        display: block;
+        line-height: 28px;
+      }
+      .scale-number-symbol{
+        background: #E9E9E9;
+        height: 16px;
+        width: 16px;
+        display: inline-block;
+        color: #333;
+        font-size: 14px;
+        line-height: 16px;
+        border-radius: 50%;
+        text-align: center;
+        margin-top: 6px;
+      }
+    }
     /deep/ .el-input--mini{
       input{
         border: none;

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

@@ -53,7 +53,7 @@
             </el-dropdown-menu>
           </el-dropdown>
 
-          <div class="flex middle special-select mb10" style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px">
+          <div class="flex middle special-select mb10" style="width: 75px;height: 28px;display: inline-block;margin: 0 40px 0 20px;background: #fff">
             <div class="full pr10">
               <el-select v-model="lineName" placeholder="请选择" size="small"
               :popper-append-to-body="false"
@@ -107,7 +107,7 @@
                    :class="{'nz-btn-disabled':prevent_opt.save}">
              {{$t('project.topology.save')}}
            </button>
-           <button @click="cancelTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-light-new">
+           <button @click="cancelTopology" class="nz-btn nz-btn-size-normal-new nz-btn-style-normal-new">
              {{$t('project.topology.cancel')}}
            </button>
          </span>
@@ -448,7 +448,9 @@
                 this.chartGetData[index].res=obj.arr;
                 if(obj.item.type===0){// 判断valueMapping 给相应的状态
                   // obj.item.animateType='warning';
-                  // onChangeAnimate(obj.item,'warning')
+                  if(obj.item.animateType){
+                    onChangeAnimate(obj.item,obj.item.animateType)
+                  }
                 }else if(obj.item.type===1){// 判断valueMapping 给相应的状态
                   // onChangeAnimateLine(obj.item,'beads')
                 }
@@ -465,9 +467,45 @@
 
       reload(){
         this.getTopologyData().then((data)=>{
-          getTopology(this.topologyIndex).open(data);
+          this.openTopologyData(data).then(()=>{
-          getTopology(this.topologyIndex).lock(1);
+            //获取对应的值 给节点 连线添加对应动画
-          this.getNodesArr();
+            console.log(data);
+            this.lineName=data.lineName?data.lineName:this.lineName;
+            this.chartGetData=[];
+            let axiosArr=[];
+            let endTime=this.filterTime[1];
+            let startTime=this.filterTime[0];
+            let step=bus.getStep(startTime,endTime);
+            data.pens&&data.pens.forEach(item=>{
+              console.log(item.id);
+              this.chartGetData.push({id:item.id,res:[]});
+              let arr=item.data.expressArr.map((ele)=>{
+                let query=encodeURIComponent(ele);
+                query+='&nullType='+'connected';
+                return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
+              });
+              axiosArr.push({item,arr});
+            });
+
+            axios.all(axiosArr).then(all=>{
+              all.forEach((obj,index)=>{
+                this.chartGetData[index].res=obj.arr;
+                if(obj.item.type===0){// 判断valueMapping 给相应的状态
+                  // obj.item.animateType='warning';
+                  if(obj.item.animateType){
+                    onChangeAnimate(obj.item,obj.item.animateType)
+                  }
+                }else if(obj.item.type===1){// 判断valueMapping 给相应的状态
+                  // onChangeAnimateLine(obj.item,'beads')
+                }
+              })
+            }).then(()=>{
+              getTopology(this.topologyIndex).open(data);
+              getTopology(this.topologyIndex).lock(1);
+            });
+
+            this.getNodesArr();
+          })
         });
       },
       openTopologyData(data){
@@ -489,7 +527,7 @@
       getTopologyData(){
         return new Promise(resolve=>{
           let data=localStorage.getItem('data');
-          data=data?JSON.parse(data):{bkColor:'#FFFFFF'};
+          data=data?JSON.parse(data):{bkColor:'#FFFFFF',gridSize:10,gridColor:'#ededed',lineWidth:1,ruleColor:"#4e4e4e"};
           this.saveData={...data};
           resolve(data);
         });
@@ -638,7 +676,7 @@
               animatePlay:data.animatePlay,
               fillStyle:data.fillStyle,
               strokeStyle:data.strokeStyle,
-              lineWidth:0,
+              lineWidth:this.nodeDefaultWidth(data.name),
               iconToolState:true,
               //chart 配置项
               valueMapping:[],
@@ -650,6 +688,8 @@
               type:'line',
               displayChart:true,
               aggregation:'last',
+              title:'',
+              url:'',
             }
           }else if(data.type==1&& !data.data){
             //连线是否自动计算锚点
@@ -672,6 +712,9 @@
               type:'line',
               displayChart:true,
               aggregation:'last',
+              title:'',
+              moduleName:'',
+              url:'',
             }
           }
           if(data.type===0||data.type===1){
@@ -717,6 +760,10 @@
             case 'node':
             case 'addNode':
               this.modulesDiff(data);
+              if(data.data.expressArr.length===0){
+                data.data.expressArr.push('');
+                data.data.legends.push('');
+              }
               this.props={
                 node:data,
                 line:null,
@@ -744,6 +791,10 @@
                 pen:data,
                 pens:null,
               };
+              if(data.data.expressArr.length===0){
+                data.data.expressArr.push('');
+                data.data.legends.push('');
+              }
               this.$nextTick(()=>{
                 if(this.$refs.CanvasProps){
                   this.$refs.CanvasProps.tab='1';
@@ -1106,6 +1157,7 @@
             this.toolShow.attrCord=[domRect.width-350,0];
             this.toolShow.height=domRect.height;
             getTopology(this.topologyIndex).canvasPos=domRect;
+            this.reload();
           })
           this.getNodesArr();
         }else{
@@ -1158,6 +1210,15 @@
           this.timer3=null
         },300)
       },
+      nodeDefaultWidth(nodeName){
+        switch(nodeName){
+          case 'myCube':
+          case "rectangleImg":
+            return 0;
+          default:
+            return 1;
+        }
+      }
     },
     destroyed(){
       getTopology(this.topologyIndex).destroy();
@@ -1173,6 +1234,7 @@
       .el-collapse-item__header {
         padding: 0 10px;
         background-color: #ffffff;
+        height: 32px;
       }
       .el-collapse-item__header.is-active{
         background: #F6F6F6;
@@ -1511,7 +1573,7 @@
     }
 
     .props {
-      width: 400px;
+      width: 500px;
       height: 100%;
       border: none;
       position: absolute;