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

feat：topology添加展开收起的动画

Browse Source
This commit is contained in:
zhangyu
2020-11-27 09:24:44 +08:00
parent 16bd96a680
commit 9a4f25ae06
7 changed files with 55 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nezha-fronted/src/components/cli/webSSH.vue
View File

@@ -567,7 +567,6 @@
let contentRightHeight = contentRightDom.offsetHeight;//可视高度 let contentRightHeight = contentRightDom.offsetHeight;//可视高度
//点击时俩dom的初始高度： //点击时俩dom的初始高度：
let subInitialHeight = subListDom.offsetHeight+resizeBarHeight; let subInitialHeight = subListDom.offsetHeight+resizeBarHeight;
console.log(subListDom.offsetHeight);
//mainModalDom.style.display = "block"; //mainModalDom.style.display = "block";
resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`; resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`;
resizeBarDom.style.display = "none"; resizeBarDom.style.display = "none";

1
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -656,7 +656,6 @@
plpsscrolly(self){ plpsscrolly(self){
let el = self.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper"); let el = self.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");
self.scrollTop=el.scrollTop; self.scrollTop=el.scrollTop;
console.log(self.scrollTop);
if (el._ps_.scrollbarYTop > 50) { if (el._ps_.scrollbarYTop > 50) {
self.showTopBtn = true; self.showTopBtn = true;
self.tableHover = true; self.tableHover = true;

1
nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
View File

@@ -354,7 +354,6 @@
}); });
}, },
editEndpoint(endpoint) { editEndpoint(endpoint) {
console.log(endpoint);
this.endpoint = JSON.parse(JSON.stringify(endpoint)); this.endpoint = JSON.parse(JSON.stringify(endpoint));
this.$set(this.endpoint,'projectId',this.endpoint.project.id); this.$set(this.endpoint,'projectId',this.endpoint.project.id);
this.$set(this.endpoint,'moduleId',this.endpoint.moduleId); this.$set(this.endpoint,'moduleId',this.endpoint.moduleId);

1
nezha-fronted/src/components/common/exportXLSX.vue
View File

@@ -252,7 +252,6 @@
params.type=this.paramsType; params.type=this.paramsType;
} }
axios.get(url,{responseType:'blob',params:params}).then(res=>{ axios.get(url,{responseType:'blob',params:params}).then(res=>{
console.log(res)
if(window.navigator.msSaveOrOpenBlob){ if(window.navigator.msSaveOrOpenBlob){
// 兼容ie11 // 兼容ie11
let blobObject = new Blob([res.data]); let blobObject = new Blob([res.data]);

87
nezha-fronted/src/components/common/project/topology.vue
View File

@@ -31,19 +31,21 @@
id="network-pop" id="network-pop"
class="network-pop" class="network-pop"
:style="{transform:'scale('+zoom+')',width:'0',height:'0'}" :style="{transform:'scale('+zoom+')',width:'0',height:'0'}"
v-show="networkPopShow"
ref="network-pop" ref="network-pop"
> >
<i v-if="networkPopShow" <div v-for="item in popData">
:class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'selpop':selpopIs(item),'error-model-stat':modelPopError(item)}" <transition name="scaleTool">
v-for="item in popData" <i v-if="networkPopShow"
:style="{top:item.top,left:item.left}" :class="{'nz-icon':true,'nz-icon-hexagonBorder':true,'selpop':selpopIs(item),'error-model-stat':modelPopError(item)}"
@click="popClick(item.id)" :style="{top:item.top,left:item.left}"
:title="item.title" @click="popClick(item.id)"
> :title="item.title"
<i class="nz-icon nz-icon-liubianxing"></i> >
<i :class="[item.className,{'nz-icon':item.className},'noMove']"></i> <i class="nz-icon nz-icon-liubianxing"></i>
</i> <i :class="[item.className,{'nz-icon':item.className},'noMove']"></i>
</i>
</transition>
</div>
<!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>--> <!--<i class="nz-icon nz-icon-delete" @click="nodeDel"></i>-->
</div> </div>
<!--拓扑图选中--> <!--拓扑图选中-->
@@ -65,7 +67,7 @@
<div :style="{top:(item.y- 80 + 80*(1-zoom))+'px',left:(item.x- 26 + 26*(1-zoom))+'px',transform:'scale('+zoom+')',position:'absolute'}" <div :style="{top:(item.y- 80 + 80*(1-zoom))+'px',left:(item.x- 26 + 26*(1-zoom))+'px',transform:'scale('+zoom+')',position:'absolute'}"
v-for="(item,indexj) in modelTop" v-for="(item,indexj) in modelTop"
> >
<i :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.error&&(indexj!==activeIndex),'model-error-active':item.error&&indexj==activeIndex}" <i :class="{'nz-icon':true, 'nz-icon-shuidi':true,'model-error':item.error&&(indexj!==activeIndex),'model-error-active':item.error&&indexj===activeIndex}"
v-show="item.show" v-show="item.show"
:ref="'modelTopId'+indexj" :ref="'modelTopId'+indexj"
@click="modelTopClick(item,indexj)" @click="modelTopClick(item,indexj)"
@@ -262,12 +264,12 @@
image:'', image:'',
}, },
popData:[ popData:[
{top:'-20px', left:'-17px',className:'nz-icon-endpoint',id:'endpoint',title:this.$t('project.topology.endpoint')}, {top:'-14px', left:'-14px',className:'nz-icon-endpoint',id:'endpoint',title:this.$t('project.topology.endpoint')},
{top:'-20px', left:'28px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')}, {top:'-14px', left:'26px',className:'nz-icon-asset',id:'asset',title:this.$t('project.topology.asset')},
{top:'18px', left:'52px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')}, {top:'22px', left:'47px',className:'nz-icon-chart',id:'total',title:this.$t('project.topology.total')},
{top:'56px', left:'28px',className:'',id:'other',title:''}, {top:'56px', left:'26px',className:'',id:'other',title:''},
{top:'56px', left:'-17px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')}, {top:'56px', left:'-14px',className:'nz-icon-info-normal',id:'info',title:this.$t('project.topology.info')},
{top:'18px', left:'-38px',className:'nz-icon-gaojing',id:'alert',title:this.$t('project.topology.alert')}, {top:'22px', left:'-33px',className:'nz-icon-gaojing',id:'alert',title:this.$t('project.topology.alert')},
], ],
popDataShow:{ popDataShow:{
endpoint:false, endpoint:false,
@@ -570,10 +572,15 @@
setPopPosition(selId){//设置节点工具栏位置以及是否显示 setPopPosition(selId){//设置节点工具栏位置以及是否显示
if(!selId){return} if(!selId){return}
let position=this.network.canvasToDOM(this.network.getPositions([selId])[selId]); let position=this.network.canvasToDOM(this.network.getPositions([selId])[selId]);
this.networkPop.style.top = position.y - 85 + 85*(1-this.zoom)+'px'; this.networkPopShow=false;
this.networkPop.style.left = position.x - 32*this.zoom - 5*(1-this.zoom) +'px'; setTimeout(()=>{
if(!this.isFullScreen&&this.NodeArr.length===0&&!this.editVisNetwork){ this.networkPop.style.top = position.y - 85 + 85*(1-this.zoom)+'px';
this.networkPopShow=true; this.networkPop.style.left = position.x - 32*this.zoom - 4.8*(1-this.zoom) +'px';
},150)
if(this.NodeArr.length===0&&!this.editVisNetwork){
setTimeout(()=>{
this.networkPopShow=true;
},100)
} }
this.NodeArr=[...this.NodeArr] this.NodeArr=[...this.NodeArr]
}, },
@@ -700,6 +707,7 @@
this.expressionsInfoPosition={...position}; this.expressionsInfoPosition={...position};
}, },
modelTopClick(item,index){ modelTopClick(item,index){
console.log(index);
this.activeIndex=index; this.activeIndex=index;
this.activeModelItem=item; this.activeModelItem=item;
this.index=index; this.index=index;
@@ -900,6 +908,11 @@
this_.selNodeId=selId; this_.selNodeId=selId;
this_.cursorMove=true; this_.cursorMove=true;
this_.nodeData=this_.nodesArray.find((item)=>item.id===selId); this_.nodeData=this_.nodesArray.find((item)=>item.id===selId);
let index=this_.modelTop.findIndex((item)=>item.id===selId);
console.log(index);
this_.activeIndex=index;
this_.activeModelItem=this_.modelTop.find((item)=>item.id===selId);
this_.index=index;
if(this_.NodeArr.indexOf(selId)!==-1){ if(this_.NodeArr.indexOf(selId)!==-1){
let index = this_.NodeArr.indexOf(selId); let index = this_.NodeArr.indexOf(selId);
this_.NodeArr=this_.NodeArr.filter((item,i)=> i !== index); this_.NodeArr=this_.NodeArr.filter((item,i)=> i !== index);
@@ -960,6 +973,7 @@
this_.networkPopShow=false; this_.networkPopShow=false;
this_.index=''; this_.index='';
this_.activeIndex=''; this_.activeIndex='';
console.log(123123);
let selId=params.nodes[0]; let selId=params.nodes[0];
if(selId){ if(selId){
this_.selNodeId=selId this_.selNodeId=selId
@@ -1017,9 +1031,7 @@
this_.zoom=params.scale; this_.zoom=params.scale;
this_.modelTopUpdate(); this_.modelTopUpdate();
this_.selNodeArrUpdate(); this_.selNodeArrUpdate();
if(this_.networkPopShow){ this_.networkPopShow=false;
this_.setPopPosition(this_.selNodeId);
}
this_.topologyZoom(params.scale); this_.topologyZoom(params.scale);
return false return false
}); });
@@ -1029,9 +1041,7 @@
this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y; this_.zoom=this_.network.canvasToDOM({x:0,y:1}).y-this_.network.canvasToDOM({x:0,y:0}).y;
this_.modelTopUpdate(); this_.modelTopUpdate();
this_.selNodeArrUpdate(); this_.selNodeArrUpdate();
if(this_.networkPopShow){ this_.networkPopShow=false;
this_.setPopPosition(this_.selNodeId);
}
}); });
return false return false
}); });
@@ -1113,7 +1123,7 @@
color: #EC7F66; color: #EC7F66;
} }
.network-pop .selpop.nz-icon-hexagonBorder:hover{ .network-pop .selpop.nz-icon-hexagonBorder:hover{
transform: scale(1.2); transform: scale(1.1);
color: #4BB49B; color: #4BB49B;
} }
.network-pop .selpop:hover .nz-icon-liubianxing{ .network-pop .selpop:hover .nz-icon-liubianxing{
@@ -1124,11 +1134,11 @@
color: #D7FAF1; color: #D7FAF1;
} }
.network-pop .selpop:hover .noMove{ .network-pop .selpop:hover .noMove{
transform: scale(1.2); transform: scale(1.1);
color: #4BB49B; color: #4BB49B;
} }
.network-pop .selpop.nz-icon-hexagonBorder.error-model-stat:hover{ .network-pop .selpop.nz-icon-hexagonBorder.error-model-stat:hover{
transform: scale(1.2); transform: scale(1.1);
color: #EC7F66; color: #EC7F66;
} }
.network-pop .selpop.error-model-stat:hover .nz-icon-liubianxing{ .network-pop .selpop.error-model-stat:hover .nz-icon-liubianxing{
@@ -1139,7 +1149,7 @@
color: #FBE7E3; color: #FBE7E3;
} }
.network-pop .selpop.error-model-stat:hover .noMove{ .network-pop .selpop.error-model-stat:hover .noMove{
transform: scale(1.2); transform: scale(1.1);
color: #EC7F66; color: #EC7F66;
} }
/*.network-pop .nz-icon-hexagonBorder.error-model-stat:hover{*/ /*.network-pop .nz-icon-hexagonBorder.error-model-stat:hover{*/
@@ -1365,4 +1375,17 @@
#network_id /deep/ .vis-network{ #network_id /deep/ .vis-network{
outline: none; outline: none;
} }
.scaleTool-enter-active {
animation: scaleTool-in .15s;
}
.scaleTool-leave-active {
animation: scaleTool-in .15s reverse;
}
@keyframes scaleTool-in {
from{
top:18px;
left: 10px;
transform: scale(0.5);
}
}
</style> </style>

2
nezha-fronted/src/components/common/rightBox/trafficSetting/trafficSettingTab.vue
View File

@@ -409,7 +409,6 @@
this.$get('/asset',param).then(response=>{ this.$get('/asset',param).then(response=>{
if(response.code == 200){ if(response.code == 200){
let data=response.data.list; let data=response.data.list;
console.log(data)
let result=data.map(item=>{ let result=data.map(item=>{
return {label:item.host,value:item.host} return {label:item.host,value:item.host}
}) })
@@ -424,7 +423,6 @@
}, },
popHide() { popHide() {
console.log(this.assetSetting)
this.queryInterfaceInfos(true); this.queryInterfaceInfos(true);
}, },
showInput:function(){ showInput:function(){

1
nezha-fronted/src/components/page/config/mibBrowser.vue
View File

@@ -433,7 +433,6 @@
wrapper.scrollTop = wrapper._ps_.contentHeight; wrapper.scrollTop = wrapper._ps_.contentHeight;
} }
this.resultData = this.resultData.concat(response.data.list); this.resultData = this.resultData.concat(response.data.list);
console.log(this.resultData);
if (this.searchParam.operation == 'set') { if (this.searchParam.operation == 'set') {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")}); this.$message({duration: 2000, type: 'success', message: this.$t("tip.success")});
} }