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;//可视高度
//点击时俩dom的初始高度：
let subInitialHeight = subListDom.offsetHeight+resizeBarHeight;
console.log(subListDom.offsetHeight);
//mainModalDom.style.display = "block";
resizeModalDom.style.cssText = `height: ${subInitialHeight}px; display: block;`;
resizeBarDom.style.display = "none";

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

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

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

@@ -354,7 +354,6 @@
});
},
editEndpoint(endpoint) {
console.log(endpoint);
this.endpoint = JSON.parse(JSON.stringify(endpoint));
this.$set(this.endpoint,'projectId',this.endpoint.project.id);
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;
}
axios.get(url,{responseType:'blob',params:params}).then(res=>{
console.log(res)
if(window.navigator.msSaveOrOpenBlob){
// 兼容ie11
let blobObject = new Blob([res.data]);

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

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

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

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

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

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