gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：topolpgy 细节优化 绑定箭头参数 动画默认颜色以及预览和查看一致

Browse Source
This commit is contained in:
zhangyu
2021-02-08 09:20:40 +08:00
parent caaa0ab737
commit 5c335bf16a
3 changed files with 339 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
nezha-fronted/src/components/common/project/L5/CanvasProps.vue
View File

@@ -714,19 +714,19 @@
<div class="props-pen-item" v-if="selection.pen.type">
<div>{{$t('project.topology.arrowColor')}}</div>
<div class="p10 pl0">
<div class="color-show" @click="colorPickerClick('arrowColor')">
<div class="color-show-left" :style="{background:selection.pen.arrowColor}"></div>
<span class="color-text"> {{selection.pen.arrowColor}}</span>
<div class="color-show" @click="colorPickerClick('toArrowColor')">
<div class="color-show-left" :style="{background:selection.pen.toArrowColor}"></div>
<span class="color-text"> {{selection.pen.toArrowColor}}</span>
<span class="color-arrows">
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['arrowColor']&&!$refs['arrowColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['arrowColor']&&$refs['arrowColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-down" v-if="$refs['toArrowColor']&&!$refs['toArrowColor'].showPicker"></i>
<i class="nz-icon nz-icon-arrow-up" v-if="$refs['toArrowColor']&&$refs['toArrowColor'].showPicker"></i>
</span>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="selection.pen.arrowColor"
ref="arrowColor"
@active-change="(val)=>colorChange(val,'arrowColor')"
v-model="selection.pen.toArrowColor"
ref="toArrowColor"
@active-change="(val)=>colorChange(val,'toArrowColor')"
>
</el-color-picker>
</div>
@@ -740,7 +740,7 @@
<div class="project-content-title">{{$t('project.topology.animation')}}
<span class="float-right" style="margin-right: 10px">
<el-switch
v-model="selection.pen.animatePlay"
v-model="selection.pen.data.animatePlay"
:active-value="true"
:inactive-value="false"
active-color="#ee9d3f"
@@ -897,6 +897,7 @@
controls-position="right"
size="small"
name="x"
:min="0"
class="input"
v-model.number="topologyData.data.gridSize"
:readonly="readonly"
@@ -1354,7 +1355,6 @@
selection:{
handler(n){
if(n){
this.drowdown=0;
}
},
deep:true,
@@ -1543,7 +1543,7 @@
},
colorChange(val,name){//改变颜色
if(name==='arrowColor'){
if(name==='toArrowColor'){
this.selection.pen.fromArrowColor=this.colorRGBtoHex(val);
this.selection.pen.toArrowColor=this.colorRGBtoHex(val);
this.selection.pen.data['fromArrowColor']=this.colorRGBtoHex(val);
@@ -1623,10 +1623,10 @@
this.onChange();
},
onAnimate(val){
this.selection.pen.animateStart=this.selection.pen.animateStart?Date.now():0;
this.selection.pen.data.animatePlay=this.selection.pen.animatePlay;
// this.selection.pen.animateStart=this.selection.pen.animateStart?Date.now():0;
// this.selection.pen.data.animatePlay=this.selection.pen.animatePlay;
this.onChange();
this.$emit('animate');
// this.$emit('animate');
},
delTopologyPen(){
let delObj=this.selection.pen?this.selection.pen.id:this.selection.pens

166
nezha-fronted/src/components/common/project/topologyL5.vue
View File

@@ -6,7 +6,7 @@
<div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
<!--project主要信息-->
<div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
<div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow&&!fromPrev">
<div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
<div class="facade-top-title">
Project information
</div>
@@ -29,7 +29,7 @@
<span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
</div>
</div>
<div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow&&!fromPrev" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
<div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
<div class="facade-top-title">
<span class="label" style="padding-left: 0;">Alert :</span>
{{projectInfo.total}}
@@ -62,7 +62,7 @@
</div>
</div>
</div>
<div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
<div class="project-title" v-if="showTopTools&&!fromOverView&&!fromPrev" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
<div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
<!--工具栏-->
<span class="project-topology-tool">
@@ -207,13 +207,13 @@
>
<i
:class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state.error&&!item.data.show,'model-error-active':item.data.state.error&&item.data.show}"
:class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
:ref="'modelTopId'+index"
@click="showNodeTools(index,item)"
>
<i class="nz-icon nz-icon-model"></i>
</i>
<!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item) @click="popClick(item.id)"-->
<!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item) @click="popClick(item.id)" -->
<div v-for="item1 in popData">
<transition name="scaleTool">
<i v-if="item.data.show"
@@ -287,7 +287,7 @@
v-if="previewShow"
:obj="obj"
:topoPrevDataS="topoPrevData"
:fromOverView="true"
:fromOverView="false"
:fromPrev="true"
:topologyIndexF="1">
</topologyPrev>
@@ -297,7 +297,7 @@
</template>
<script>
import {Topology,Node,Line,registerNode} from '@topology/core';
import {Topology,Node,Line,Rect,registerNode} from '@topology/core';
import * as FileSaver from 'file-saver';
import {
Tools,
@@ -346,6 +346,7 @@
name:'topologyL5',
data(){
return {
objChange:false,//project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
chartDataInfo:{},
topoPrevData:{},//预览数据
imgInit:false,//判断图片是否加载完成
@@ -402,7 +403,7 @@
title:this.$t('project.topology.endpoint')
},
{top:'-40px',left:'19px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
{top:'-4px',left:'40px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')},
{top:'-4px',left:'40px',className:'',id:'other',title:''},
{top:'30px',left:'19px',className:'',id:'other',title:''},
{top:'30px',left:'-21px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')},
{top:'-4px',left:'-40px',className:'nz-icon-gaojing',id:'alert',title:this.$t('project.topology.alert')},
@@ -496,7 +497,8 @@
deep:true,
immediate:true,
handler(n){
if(n){
if(n.id){
if( !this.objChange){
this.editTopologyFlag=false;
this.topologyLoading=true;
this.projectInfoShow=false;
@@ -504,21 +506,48 @@
if(n.id){
this.getProjectData(n);
}
if(!this.timer){
this.timer=setTimeout(()=>{
this.topologyLoading=true;
this.init();
this.timer=null
},300)
this.objChange=true;
}else{
if(!this.timer){
this.timer=setInterval(()=>{
if(this.objChange){return}
this.editTopologyFlag=false;
this.topologyLoading=true;
this.projectInfoShow=false;
this.projectAlertShow=false;
if(n.id){
this.getProjectData(n);
}
clearTimeout(this.timer);
this.timer=null;
this.objChange=true;
this.topologyLoading=true;
this.init();
},100)
}else{
clearTimeout(this.timer);
this.timer=setTimeout(()=>{
this.timer=setInterval(()=>{
if(this.objChange){return}
this.editTopologyFlag=false;
this.topologyLoading=true;
this.projectInfoShow=false;
this.projectAlertShow=false;
if(n.id){
this.getProjectData(n);
}
clearTimeout(this.timer);
this.timer=null;
this.objChange=true;
this.topologyLoading=true;
this.init();
this.timer=null
},300)
},100)
}
}
}
}
}
},
@@ -583,6 +612,7 @@
Promise.all(promiseArr).then((res)=>{
getTopology(this.topologyIndex).open(data);
getTopology(this.topologyIndex).lock(1);
this.objChange=false;
if(this.fromOverView){
let flag=false;
@@ -601,6 +631,18 @@
flag=true
}
});
getTopology(this.topologyIndex).centerView(50);
setTimeout(()=>{
getTopology(this.topologyIndex).data.pens.forEach(item=>{
console.log(item.animatePlay,123123123123123123123)
if(item.animatePlay){
item.stopAnimate();
setTimeout(()=>{
item.startAnimate()
})
}
},100);
})
// if(this.fromPrev){
// getTopology(this.topologyIndex).scaleTo(data.scale/2)
// }
@@ -646,7 +688,6 @@
query+='&nullType='+'connected';
return this.$get('/prom/api/v1/query_range?query='+query+"&start="+this.$stringTimeParseToUnix(startTime)+"&end="+this.$stringTimeParseToUnix(endTime)+'&step='+step);
});
console.log(arr);
axiosArr.push({item,arr});
promiseArr.push(pensPromise(item,arr,index))
});
@@ -671,6 +712,17 @@
flag=true
}
});
setTimeout(()=>{
getTopology(this.topologyIndex).data.pens.forEach(item=>{
console.log(item.animatePlay,123123123123123123123)
if(item.animatePlay){
item.stopAnimate();
setTimeout(()=>{
item.startAnimate()
})
}
},100);
})
// if(this.fromPrev){
// getTopology(this.topologyIndex).scaleTo(data.scale/2)
// }
@@ -705,7 +757,9 @@
}
this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
let data=res.data.topo;
console.log(data,'topo')
if(!res.data.topo || !data.pens){
console.log(123123123123);
data={
bkColor:'#FFFFFF',
gridSize:10,
@@ -723,29 +777,19 @@
return
}
clearInterval(timer);
let promiseArr=[];
let self=this;
data.pens.forEach((item=>{
if(item.type===0&&item.data.imageId){
item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image
}
if(item.type===0){
this.$get('/module/stat',{id:item.data.moduleId}).then(res=>{
item.data.state=res.data;
item.data.state.asset=false;
item.data.state.endpoint=false;
item.data.state.alert=false;
if(item.data.state.assetStat.down>0){
item.data.state.asset=true;
}
if( item.data.state.endpointStat.down>0){
item.data.state.endpoint=true;
}
if(item.data.state.alertStat.P1> 0 || item.data.state.alertStat.P3>0 || item.data.state.alertStat.P2>0){
item.data.state.alert=true;
}
item.data.state.error= item.data.state.asset && item.data.state.endpoint && item.data.state.alert;
});
promiseArr.push(this.$get('/module/stat',{id:item.data.moduleId}));
}else{
promiseArr.push({type:1})
}
}));
if(!data.data){
this.projectInfoShow=true;
this.projectAlertShow=true;
@@ -756,8 +800,32 @@
this.projectInfoShow=data.data.projectInfo;
this.projectAlertShow=data.data.alertInfo;
}
this.saveData={...data};
Promise.all(promiseArr).then(res=>{
console.log(res);
res.forEach((response,index)=>{
let item=data.pens[index];
if(item.type===0){
item.data.state=response.data;
item.data.state.asset=false;
item.data.state.endpoint=false;
item.data.state.alert=false;
if(item.data.state.assetStat.down>0){
item.data.state.asset=true;
}
if(item.data.state.endpointStat.down>0){
item.data.state.endpoint=true;
}
if(item.data.state.alertStat.P1> 0 || item.data.state.alertStat.P3>0 || item.data.state.alertStat.P2>0){
item.data.state.alert=true;
}
item.data.state.error= item.data.state.asset || item.data.state.endpoint || item.data.state.alert;
console.log(item.data);
}
});
self.saveData={...data};
resolve(data);
});
},100)
}
})
@@ -916,6 +984,7 @@
},
getNodesArr(){
if(!getTopology(this.topologyIndex)) return;
this.nodesArr=getTopology(this.topologyIndex).data.pens.filter(item=>{
if(!item.data){
item.data={
@@ -976,7 +1045,7 @@
//具体内容点击
nodeTools(node,tool){
this.moduleId=node.data.moduleId;
if(tool.id==='total'&&!node.data.expressArr.length){
if(tool.id==='total'){
this.popDataShowUpdate('',false,node);
return
}
@@ -1045,6 +1114,9 @@
;
}
if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
// if(data.type===0){
// data.textRect=new Rect(data.rect.ex-10,data.rect.ey-10,data.rect.width,data.rect.height);
// }
if(data.type===0&& !data.data.moduleId){
data.data={
...data.data,
@@ -1052,7 +1124,7 @@
moduleName:'',
show:false,
error:false,
animatePlay:data.animatePlay,
animatePlay:false,
fillStyle:data.fillStyle,
strokeStyle:data.strokeStyle,
lineWidth:this.nodeDefaultWidth(data.name),
@@ -1084,7 +1156,7 @@
//连线是否自动计算锚点
// data.manualCps=true;
data.data={
animatePlay:data.animatePlay,
animatePlay:false,
strokeStyle:data.strokeStyle,
animateColor:data.animateColor,
arrowColor:data.arrowColor,
@@ -1114,7 +1186,9 @@
title:'',
moduleName:'',
url:'',
}
};
data.animateColor='#FA901C'
console.log(data);
}
if(data.type===0||data.type===1){
data.lineWidth=data.data.lineWidth;
@@ -1251,7 +1325,9 @@
let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
this.toolShow.attrCord=[domRect.width-350,0];
this.toolShow.height=domRect.height;
if(getTopology(this.topologyIndex)){
getTopology(this.topologyIndex).canvasPos=domRect;
}
break;
case 'scale':
if(this.$refs.topTool){
@@ -1289,7 +1365,10 @@
case 'translate':
this.moduleId='';
this.showNodeTools('');
this.popDataShowUpdate('',false)
this.popDataShowUpdate('',false);
if(!this.editTopologyFlag){
getTopology(this.topologyIndex)
}
break;
}
switch(event){
@@ -1501,7 +1580,7 @@
if(item.type===0){
item.fillStyle=item.data.fillStyle;
item.strokeStyle=item.data.strokeStyle;
item.animatePlay=item.data.animatePlay;
item.animatePlay=false;
item.font.color="#000000";
}else if(item.type===1){
item.animateColor=item.data.animateColor;
@@ -1509,7 +1588,7 @@
item.arrowColor=item.data.arrowColor;
item.fromArrowColor=item.data.fromArrowColor;
item.toArrowColor=item.data.toArrowColor;
item.animatePlay=item.data.animatePlay;
item.animatePlay=false;
item.font.color="#000000";
}
})
@@ -1553,6 +1632,7 @@
if(flag){
this.editTopologyFlag=false;
topologyData.pens.forEach(item=>{
item.animatePlay=item.data.animatePlay;
if(item.type===0&&JSON.stringify(item.data.imageId)){
item.image="";
item.animateFrames=[];
@@ -1616,7 +1696,11 @@
},
//预览
previewTopology(){
this.topoPrevData=getTopology(this.topologyIndex).data;
let data=JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data));
data.pens.forEach((item)=>{
item.animatePlay=item.data.animatePlay;
});
this.topoPrevData=data;
this.previewShow=true;
},
/*tools 方法*/

197
nezha-fronted/src/components/common/project/topologyPrev.vue
View File

@@ -3,10 +3,10 @@
@import "./L5/css/props.css";
</style>
<template>
<div class="project-box" v-loading="topologyLoading">
<div class="project-box" v-loading="topologyLoading" :style="{'border':fromOverView?'none':'1px solid #eeeeee'}">
<!--project主要信息-->
<div class="facade-top" v-if="!editTopologyFlag&&!fromOverView">
<div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow&&!fromPrev">
<div class="facade-top-left" v-loading="projectInfo.loading" v-if="projectInfoShow">
<div class="facade-top-title">
Project information
</div>
@@ -29,7 +29,7 @@
<span><span class="label">Module Num :</span>{{projectInfo.moduleMum}}</span>
</div>
</div>
<div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow&&!fromPrev" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
<div class="facade-top-right" v-loading="projectInfo.loading" v-if="projectAlertShow" style="padding: 20px 20px 0 20px;height: calc(100% - 20px);">
<div class="facade-top-title">
<span class="label" style="padding-left: 0;">Alert :</span>
{{projectInfo.total}}
@@ -62,7 +62,7 @@
</div>
</div>
</div>
<div class="project-title" v-if="showTopTools&&!fromOverView" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
<div class="project-title" v-if="showTopTools&&!fromOverView&&!fromPrev" :style="{'background':editTopologyFlag?'#F6F6F6':'#ffffff','border-bottom':editTopologyFlag? '1px solid #F6F6F6':'' }">
<div v-show="editTopologyFlag" class="edit-topologyLine" style="padding-left: 20px">
<!--工具栏-->
<span class="project-topology-tool">
@@ -116,7 +116,7 @@
<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"
<el-select v-model="lineName" :placeholder="$t('el.select.placeholder')" size="small"
:popper-append-to-body="false"
@change="changeTopologyOpt(lineName,'lineName')">
<div slot="prefix">
@@ -181,7 +181,7 @@
<i class="nz-icon nz-icon-edit" :title="$t('project.topology.edit')"></i>
</button>
<pick-time v-show="!editTopologyFlag" :showTimePicker="false" class="float-right pickTime"
:refresh-data-func="refreshTopology" v-model="searchTime" :use-chart-unit="false"
:refresh-data-func="reload" v-model="searchTime" :use-chart-unit="false"
ref="pickTime"></pick-time>
</span>
</div>
@@ -207,17 +207,17 @@
>
<i
:class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.error&&!item.data.show,'model-error-active':item.data.error&&item.data.show}"
:class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.data.state&&item.data.state.error&&!item.data.show,'model-error-active':item.data.state&&item.data.state.error&&item.data.show}"
:ref="'modelTopId'+index"
@click="showNodeTools(index,item)"
>
<i class="nz-icon nz-icon-model"></i>
</i>
<!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item) @click="popClick(item.id)"-->
<!--'selpop':selpopIs(item),'no-selPop':!selpopIs(item),'error-model-stat':modelPopError(item) @click="popClick(item.id)" -->
<div v-for="item1 in popData">
<transition name="scaleTool">
<i v-if="item.data.show"
:class="{'nz-icon':true,'nz-icon-hexagonBorder':true}"
:class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'error-model-stat':item.data.state[item1.id],'selpop':selpopIs(item,item1),'no-selPop':!selpopIs(item,item1),}"
:style="{top:item1.top,left:item1.left}"
:title="item1.title"
@click="nodeTools(item,item1)"
@@ -287,7 +287,7 @@
v-if="previewShow"
:obj="obj"
:topoPrevDataS="topoPrevData"
:fromOverView="true"
:fromOverView="false"
:fromPrev="true"
:topologyIndexF="1">
</topologyPrev>
@@ -297,7 +297,7 @@
</template>
<script>
import {Topology,Node,Line,registerNode} from '@topology/core';
import {Topology,Node,Line,Rect,registerNode} from '@topology/core';
import * as FileSaver from 'file-saver';
import {
Tools,
@@ -346,6 +346,7 @@
name:'topologyL5',
data(){
return {
objChange:false,//project 变化 用于判断 init是否执行完成 执行完成 才可以执行下次变化
chartDataInfo:{},
topoPrevData:{},//预览数据
imgInit:false,//判断图片是否加载完成
@@ -402,7 +403,7 @@
title:this.$t('project.topology.endpoint')
},
{top:'-40px',left:'19px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
{top:'-4px',left:'40px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')},
{top:'-4px',left:'40px',className:'',id:'other',title:''},
{top:'30px',left:'19px',className:'',id:'other',title:''},
{top:'30px',left:'-21px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')},
{top:'-4px',left:'-40px',className:'nz-icon-gaojing',id:'alert',title:this.$t('project.topology.alert')},
@@ -496,7 +497,8 @@
deep:true,
immediate:true,
handler(n){
if(n){
if(n.id){
if( !this.objChange){
this.editTopologyFlag=false;
this.topologyLoading=true;
this.projectInfoShow=false;
@@ -504,21 +506,48 @@
if(n.id){
this.getProjectData(n);
}
if(!this.timer){
this.timer=setTimeout(()=>{
this.topologyLoading=true;
this.init();
this.timer=null
},300)
this.objChange=true;
}else{
if(!this.timer){
this.timer=setInterval(()=>{
if(this.objChange){return}
this.editTopologyFlag=false;
this.topologyLoading=true;
this.projectInfoShow=false;
this.projectAlertShow=false;
if(n.id){
this.getProjectData(n);
}
clearTimeout(this.timer);
this.timer=null;
this.objChange=true;
this.topologyLoading=true;
this.init();
},100)
}else{
clearTimeout(this.timer);
this.timer=setTimeout(()=>{
this.timer=setInterval(()=>{
if(this.objChange){return}
this.editTopologyFlag=false;
this.topologyLoading=true;
this.projectInfoShow=false;
this.projectAlertShow=false;
if(n.id){
this.getProjectData(n);
}
clearTimeout(this.timer);
this.timer=null;
this.objChange=true;
this.topologyLoading=true;
this.init();
this.timer=null
},300)
},100)
}
}
}
}
}
},
@@ -583,6 +612,7 @@
Promise.all(promiseArr).then((res)=>{
getTopology(this.topologyIndex).open(data);
getTopology(this.topologyIndex).lock(1);
this.objChange=false;
if(this.fromOverView){
let flag=false;
@@ -601,6 +631,18 @@
flag=true
}
});
getTopology(this.topologyIndex).centerView(50);
setTimeout(()=>{
getTopology(this.topologyIndex).data.pens.forEach(item=>{
console.log(item.animatePlay,123123123123123123123)
if(item.animatePlay){
item.stopAnimate();
setTimeout(()=>{
item.startAnimate()
})
}
},100);
})
// if(this.fromPrev){
// getTopology(this.topologyIndex).scaleTo(data.scale/2)
// }
@@ -613,6 +655,7 @@
},
reload(){
this.topologyLoading=true;
this.getTopologyData().then((data)=>{
this.openTopologyData(data).then(()=>{
//获取对应的值 给节点 连线添加对应动画
@@ -669,6 +712,17 @@
flag=true
}
});
setTimeout(()=>{
getTopology(this.topologyIndex).data.pens.forEach(item=>{
console.log(item.animatePlay,123123123123123123123)
if(item.animatePlay){
item.stopAnimate();
setTimeout(()=>{
item.startAnimate()
})
}
},100);
})
// if(this.fromPrev){
// getTopology(this.topologyIndex).scaleTo(data.scale/2)
// }
@@ -703,7 +757,9 @@
}
this.$get('/project/topo',{projectId:this.obj.id}).then(res=>{
let data=res.data.topo;
console.log(data,'topo')
if(!res.data.topo || !data.pens){
console.log(123123123123);
data={
bkColor:'#FFFFFF',
gridSize:10,
@@ -721,11 +777,19 @@
return
}
clearInterval(timer);
let promiseArr=[];
let self=this;
data.pens.forEach((item=>{
if(item.type===0&&item.data.imageId){
item.image=this.iconArray.find(item1=>item1.id==item.data.imageId).image
}
if(item.type===0){
promiseArr.push(this.$get('/module/stat',{id:item.data.moduleId}));
}else{
promiseArr.push({type:1})
}
}));
if(!data.data){
this.projectInfoShow=true;
this.projectAlertShow=true;
@@ -736,8 +800,32 @@
this.projectInfoShow=data.data.projectInfo;
this.projectAlertShow=data.data.alertInfo;
}
this.saveData={...data};
Promise.all(promiseArr).then(res=>{
console.log(res);
res.forEach((response,index)=>{
let item=data.pens[index];
if(item.type===0){
item.data.state=response.data;
item.data.state.asset=false;
item.data.state.endpoint=false;
item.data.state.alert=false;
if(item.data.state.assetStat.down>0){
item.data.state.asset=true;
}
if(item.data.state.endpointStat.down>0){
item.data.state.endpoint=true;
}
if(item.data.state.alertStat.P1> 0 || item.data.state.alertStat.P3>0 || item.data.state.alertStat.P2>0){
item.data.state.alert=true;
}
item.data.state.error= item.data.state.asset || item.data.state.endpoint || item.data.state.alert;
console.log(item.data);
}
});
self.saveData={...data};
resolve(data);
});
},100)
}
})
@@ -896,6 +984,7 @@
},
getNodesArr(){
if(!getTopology(this.topologyIndex)) return;
this.nodesArr=getTopology(this.topologyIndex).data.pens.filter(item=>{
if(!item.data){
item.data={
@@ -956,6 +1045,10 @@
//具体内容点击
nodeTools(node,tool){
this.moduleId=node.data.moduleId;
if(tool.id==='total'){
this.popDataShowUpdate('',false,node);
return
}
setTimeout(()=>{
this.popDataShowUpdate(tool.id,false,node)
},100)
@@ -1021,6 +1114,9 @@
;
}
if(!Array.isArray(data)&&data){//判断不是数组 提前个data配置好节点属性
// if(data.type===0){
// data.textRect=new Rect(data.rect.ex-10,data.rect.ey-10,data.rect.width,data.rect.height);
// }
if(data.type===0&& !data.data.moduleId){
data.data={
...data.data,
@@ -1028,7 +1124,7 @@
moduleName:'',
show:false,
error:false,
animatePlay:data.animatePlay,
animatePlay:false,
fillStyle:data.fillStyle,
strokeStyle:data.strokeStyle,
lineWidth:this.nodeDefaultWidth(data.name),
@@ -1060,7 +1156,7 @@
//连线是否自动计算锚点
// data.manualCps=true;
data.data={
animatePlay:data.animatePlay,
animatePlay:false,
strokeStyle:data.strokeStyle,
animateColor:data.animateColor,
arrowColor:data.arrowColor,
@@ -1090,7 +1186,9 @@
title:'',
moduleName:'',
url:'',
}
};
data.animateColor='#FA901C'
console.log(data);
}
if(data.type===0||data.type===1){
data.lineWidth=data.data.lineWidth;
@@ -1227,7 +1325,9 @@
let domRect=document.getElementById('topology-canvas'+this.topologyIndexF).getBoundingClientRect();
this.toolShow.attrCord=[domRect.width-350,0];
this.toolShow.height=domRect.height;
if(getTopology(this.topologyIndex)){
getTopology(this.topologyIndex).canvasPos=domRect;
}
break;
case 'scale':
if(this.$refs.topTool){
@@ -1265,7 +1365,10 @@
case 'translate':
this.moduleId='';
this.showNodeTools('');
this.popDataShowUpdate('',false)
this.popDataShowUpdate('',false);
if(!this.editTopologyFlag){
getTopology(this.topologyIndex)
}
break;
}
switch(event){
@@ -1477,7 +1580,7 @@
if(item.type===0){
item.fillStyle=item.data.fillStyle;
item.strokeStyle=item.data.strokeStyle;
item.animatePlay=item.data.animatePlay;
item.animatePlay=false;
item.font.color="#000000";
}else if(item.type===1){
item.animateColor=item.data.animateColor;
@@ -1485,7 +1588,7 @@
item.arrowColor=item.data.arrowColor;
item.fromArrowColor=item.data.fromArrowColor;
item.toArrowColor=item.data.toArrowColor;
item.animatePlay=item.data.animatePlay;
item.animatePlay=false;
item.font.color="#000000";
}
})
@@ -1529,6 +1632,7 @@
if(flag){
this.editTopologyFlag=false;
topologyData.pens.forEach(item=>{
item.animatePlay=item.data.animatePlay;
if(item.type===0&&JSON.stringify(item.data.imageId)){
item.image="";
item.animateFrames=[];
@@ -1536,6 +1640,14 @@
delete item.img;
delete item.lastImage;
}
item.data.expressArr=item.data.expressArr.filter((expression,i)=>{
if(!expression){
item.data.legends.splice(i,1);
return false
} else {
return true
}
})
});
this.$put('/project/topo',{topo:JSON.stringify(topologyData),projectId:this.projectInfo.id}).then(res=>{
this.prevent_opt.save=false;
@@ -1584,7 +1696,11 @@
},
//预览
previewTopology(){
this.topoPrevData=getTopology(this.topologyIndex).data;
let data=JSON.parse(JSON.stringify(getTopology(this.topologyIndex).data));
data.pens.forEach((item)=>{
item.animatePlay=item.data.animatePlay;
});
this.topoPrevData=data;
this.previewShow=true;
},
/*tools 方法*/
@@ -1626,7 +1742,32 @@
console.log(123123123123);
this.$emit('changeTopologyIndexF');
done();
},
selpopIs(pen,state){//判断是否有图表
console.log(pen,state)
let flag=true;
if(state.id==='other'){
flag=false;
}
if(state.id==='total'&&pen.data.expressArr.length===0){
flag=false;
}
return flag
},
modelPopError(pen,state){
console.log(pen,state)
return false;
if(item.id==='asset'&&this.activeModelItem.assetError){
return true;
}
if(item.id==='alert'&&this.activeModelItem.alertError){
return true;
}
if(item.id==='endpoint'&&this.activeModelItem.endpointError){
return true;
}
return false;
},
},
destroyed(){
getTopology(this.topologyIndex).destroy();
@@ -1911,7 +2052,7 @@
}
.network-pop .no-selPop {
color: #999;
color: #999 !important;
}
.network-pop .no-selPop .nz-icon-liubianxing {