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

feat：修改首页加载方式

Browse Source
This commit is contained in:
zhangyu
2021-02-04 18:01:57 +08:00
parent d817ee3be7
commit 15df380a10
3 changed files with 65 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
nezha-fronted/src/components/common/project/L5/services/canvas.js
View File

@@ -311,7 +311,7 @@ export function myCubeAnchors(node) {//立方体锚点
export function onChangeAnimate(node,animateType) { export function onChangeAnimate(node,animateType,fillStyle,strokeStyle) {
if (node.animateType === 'custom') { if (node.animateType === 'custom') {
return; return;
} }
@@ -392,7 +392,7 @@ export function onChangeAnimate(node,animateType) {
}); });
break; break;
case 'success': case 'success':
state.strokeStyle = '#237804'; state.strokeStyle = strokeStyle?strokeStyle:'#237804';
node.animateFrames.push({ node.animateFrames.push({
duration: 100, duration: 100,
linear: true, linear: true,
@@ -414,8 +414,8 @@ export function onChangeAnimate(node,animateType) {
linear: true, linear: true,
state: Node.cloneState(node) state: Node.cloneState(node)
}); });
state.strokeStyle = '#237804'; state.strokeStyle = strokeStyle?strokeStyle: '#237804';
state.fillStyle = '#389e0d22'; state.fillStyle = fillStyle?fillStyle:'#389e0d22';
node.animateFrames.push({ node.animateFrames.push({
duration: 3000, duration: 3000,
linear: true, linear: true,
@@ -423,8 +423,8 @@ export function onChangeAnimate(node,animateType) {
}); });
break; break;
case 'warning': case 'warning':
state.strokeStyle = '#fa8c16'; state.strokeStyle = strokeStyle?strokeStyle:'#fa8c16';
state.fillStyle = '#fa8c16'; state.fillStyle = fillStyle?fillStyle:'#fa8c16';
state.lineWidth=5; state.lineWidth=5;
state.dash = 2; state.dash = 2;
node.animateFrames.push({ node.animateFrames.push({
@@ -432,7 +432,7 @@ export function onChangeAnimate(node,animateType) {
linear: true, linear: true,
state state
}); });
state.strokeStyle = '#fa8c16'; state.strokeStyle = strokeStyle?strokeStyle: '#fa8c16';
state.dash = 0; state.dash = 0;
state.lineWidth=1; state.lineWidth=1;
state.fillStyle = '#ffffff'; state.fillStyle = '#ffffff';
@@ -441,10 +441,10 @@ export function onChangeAnimate(node,animateType) {
linear: true, linear: true,
state: Node.cloneState(state) state: Node.cloneState(state)
}); });
state.strokeStyle = '#fa8c16'; state.strokeStyle = strokeStyle?strokeStyle: '#fa8c16';
state.dash = 2; state.dash = 2;
state.lineWidth=5; state.lineWidth=5;
state.fillStyle = '#fa8c16'; state.fillStyle = fillStyle?fillStyle: '#fa8c16';
node.animateFrames.push({ node.animateFrames.push({
duration: 300, duration: 300,
linear: true, linear: true,
@@ -452,8 +452,8 @@ export function onChangeAnimate(node,animateType) {
}); });
break; break;
case 'error': case 'error':
state.strokeStyle = '#cf1322'; state.strokeStyle = strokeStyle?strokeStyle: '#cf1322';
// state.fillStyle = '#cf132222'; state.fillStyle = fillStyle?fillStyle:'#cf132222';
state.lineWidth=5; state.lineWidth=5;
state.dash = 2; state.dash = 2;
node.animateFrames.push({ node.animateFrames.push({
@@ -461,7 +461,8 @@ export function onChangeAnimate(node,animateType) {
linear: true, linear: true,
state state
}); });
state.strokeStyle = '#cf1322'; state.strokeStyle = strokeStyle?strokeStyle:'#cf1322';
state.fillStyle = '#ffffff';
state.dash = 0; state.dash = 0;
state.lineWidth=1; state.lineWidth=1;
node.animateFrames.push({ node.animateFrames.push({
@@ -469,7 +470,8 @@ export function onChangeAnimate(node,animateType) {
linear: true, linear: true,
state: Node.cloneState(state) state: Node.cloneState(state)
}); });
state.strokeStyle = '#cf1322'; state.strokeStyle = strokeStyle?strokeStyle: '#cf1322';
state.fillStyle = fillStyle?fillStyle:'#cf132222';
state.dash = 2; state.dash = 2;
state.lineWidth=5; state.lineWidth=5;
node.animateFrames.push({ node.animateFrames.push({
@@ -479,14 +481,14 @@ export function onChangeAnimate(node,animateType) {
}); });
break; break;
case 'show': case 'show':
state.strokeStyle = '#fa541c'; state.strokeStyle = strokeStyle?strokeStyle: '#fa541c';
state.rotate = -10; state.rotate = -5;
node.animateFrames.push({ node.animateFrames.push({
duration: 100, duration: 100,
linear: true, linear: true,
state: Node.cloneState(state) state: Node.cloneState(state)
}); });
state.rotate = 10; state.rotate = 5;
node.animateFrames.push({ node.animateFrames.push({
duration: 100, duration: 100,
linear: true, linear: true,

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

@@ -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">No Data</div>
<div class="expression-info-content" v-if="expressionInfoData.length>0"> <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-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-col class="info-content" :span="6" :style="{background:computeData(item).fill,color:computeData(item).text}">{{item.showValue}}</el-col>
</el-row> </el-row>
</div> </div>

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

@@ -3,7 +3,7 @@
@import "./L5/css/props.css"; @import "./L5/css/props.css";
</style> </style>
<template> <template>
<div class="project-box"> <div class="project-box" v-loading="topologyLoading">
<div class="project-title" v-if="showTopTools&&!fromOverView"> <div class="project-title" v-if="showTopTools&&!fromOverView">
<div v-show="editTopologyFlag" class="edit-topologyLine"> <div v-show="editTopologyFlag" class="edit-topologyLine">
<!--工具栏--> <!--工具栏-->
@@ -128,7 +128,7 @@
</div> </div>
<div class="page"> <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"> <div class="props" v-if="editTopologyFlag&&toolShow.attr">
<CanvasProps :selection.sync="props" <CanvasProps :selection.sync="props"
@@ -272,6 +272,7 @@
editFlag:true, editFlag:true,
tools:Tools, tools:Tools,
props:{}, props:{},
topologyLoading:false,
contextmenu:{ contextmenu:{
left:null, left:null,
top:null, top:null,
@@ -395,14 +396,18 @@
immediate:true, immediate:true,
handler(n){ handler(n){
if(n){ if(n){
this.editTopologyFlag=false;
this.topologyLoading=true;
if(!this.timer){ if(!this.timer){
this.timer=setTimeout(()=>{ this.timer=setTimeout(()=>{
this.topologyLoading=true;
this.init(); this.init();
this.timer=null this.timer=null
},300) },300)
}else{ }else{
clearTimeout(this.timer); clearTimeout(this.timer);
this.timer=setTimeout(()=>{ this.timer=setTimeout(()=>{
this.topologyLoading=true;
this.init(); this.init();
this.timer=null this.timer=null
},300) },300)
@@ -474,7 +479,22 @@
getTopology(this.topologyIndex).open(data); getTopology(this.topologyIndex).open(data);
getTopology(this.topologyIndex).lock(1); getTopology(this.topologyIndex).lock(1);
if(this.fromOverView){ 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(); // getTopology(this.topologyIndex).fitView();
this.getNodesArr(); this.getNodesArr();
} }
@@ -523,11 +543,6 @@
Promise.all(promiseArr).then((res)=>{ Promise.all(promiseArr).then((res)=>{
getTopology(this.topologyIndex).open(data); getTopology(this.topologyIndex).open(data);
getTopology(this.topologyIndex).lock(1); 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=>{ return new Promise(resolve=>{
let canvas=new Topology('topology-canvas'+this.topologyIndexF,canvasOptions); let canvas=new Topology('topology-canvas'+this.topologyIndexF,canvasOptions);
canvas.open(data); canvas.open(data);
this.topologyLoading=false;
setTopology(this.topologyIndex,canvas); setTopology(this.topologyIndex,canvas);
if(!getTopology(this.topologyIndex).data.name){ if(!getTopology(this.topologyIndex).data.name){
getTopology(this.topologyIndex).data.name=this.obj.name; getTopology(this.topologyIndex).data.name=this.obj.name;
@@ -611,6 +627,8 @@
if(pen.type===0){// 判断valueMapping 给相应的状态 if(pen.type===0){// 判断valueMapping 给相应的状态
let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel); let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
pen.font.color=selLevel.color.text; 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); onChangeAnimate(pen,selLevel.animateType,selLevel.color.fill,selLevel.color.line);
}else if(pen.type===1){// 判断valueMapping 给相应的状态 }else if(pen.type===1){// 判断valueMapping 给相应的状态
let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel); let selLevel=pen.data.valueMapping.find(item=>item.level===maxLevel);
@@ -705,7 +723,6 @@
//获取module //获取module
getModule(){ getModule(){
this.projectInfo.loading=true; this.projectInfo.loading=true;
// this.$refs['visNetwork'].topologyLoading=true;
this.$get('project/info',{id:this.obj.id}).then(response=>{ this.$get('project/info',{id:this.obj.id}).then(response=>{
if(response.code===200){ if(response.code===200){
this.projectInfo.loading=false; this.projectInfo.loading=false;
@@ -827,7 +844,7 @@
},100); },100);
}, },
onMessage(event,data){ onMessage(event,data,e){
console.log('onMessage',event,data); console.log('onMessage',event,data);
// console.log(getTopology(this.topologyIndex)) // console.log(getTopology(this.topologyIndex))
if(getTopology(this.topologyIndex)){ if(getTopology(this.topologyIndex)){
@@ -916,28 +933,31 @@
switch(event){ switch(event){
case 'moveInNode': case 'moveInNode':
case 'moveInLine': 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.chartData={...data.data,...this.chartGetData.find(item=>item.id===data.id)};
this.tooltipPosition.show=false;
setTimeout(()=>{
this.tooltipPosition.show=true; this.tooltipPosition.show=true;
},50);
break; break;
case 'moveOutNode': case 'moveOutNode':
case 'moveOutLine': case 'moveOutLine':
this.tooltipPosition.show=false; // this.tooltipPosition.show=false;
return // return
if(!this.timer3){ if(!this.timer3){
this.timer3=setTimeout(()=>{ this.timer3=setTimeout(()=>{
this.tooltipPosition.show=false; this.tooltipPosition.show=false;
this.timer3=null this.timer3=null
},300) },150)
}else{ }else{
clearTimeout(this.timer3); clearTimeout(this.timer3);
this.timer3=setTimeout(()=>{ this.timer3=setTimeout(()=>{
this.tooltipPosition.show=false; this.tooltipPosition.show=false;
this.timer3=null this.timer3=null
},300) },150)
} }
break; break;
} }
@@ -1408,21 +1428,21 @@
getTopology(this.topologyIndex).centerView(); getTopology(this.topologyIndex).centerView();
}, },
canvasMove(e){// 画布上的移动 确定tooltip的位置 canvasMove(e){// 画布上的移动 确定tooltip的位置
if(!this.tooltipPosition.show||this.timer3){ if(this.tooltipPosition.show){
return return
} }
this.tooltipPosition.top=e.offsetY; this.tooltipPosition.top=e.offsetY;
this.tooltipPosition.left=e.offsetX+20; this.tooltipPosition.left=e.offsetX+20;
}, },
tooltipOver(){ tooltipOver(){
// clearTimeout(this.timer3); clearTimeout(this.timer3);
// this.timer3=null this.timer3=null
}, },
tooltipOut(){ tooltipOut(){
// this.timer3=setTimeout(()=>{ this.timer3=setTimeout(()=>{
// this.tooltipPosition.show=false; this.tooltipPosition.show=false;
// this.timer3=null this.timer3=null
// },300) },150)
}, },
nodeDefaultWidth(nodeName){ nodeDefaultWidth(nodeName){
switch(nodeName){ switch(nodeName){