style: 拓扑图 细节优化

This commit is contained in:
zhangyu
2020-09-04 10:04:41 +08:00
parent dd684bfe93
commit 1c7f2689c8
5 changed files with 26 additions and 12 deletions

View File

@@ -1,7 +1,7 @@
<template>
<div class="main-content">
<div class="main-box">
<div class="main-box-title">Asset</div>
<div class="main-box-title">Assets</div>
<div class="main-box-content">
<div class="content-box">
<span class="content-title"><i class="el-icon-upload2 colorFFF bg23BF9A"></i>up</span>
@@ -15,7 +15,7 @@
</div>
<div class="main-box">
<div class="main-box-title">Endpoint</div>
<div class="main-box-title">Endpoints</div>
<div class="main-box-content">
<div class="content-box">
<span class="content-title"><i class="el-icon-upload2 colorFFF bg23BF9A"></i>up</span>
@@ -29,7 +29,7 @@
</div>
<div class="main-box">
<div class="main-box-title">Alert message</div>
<div class="main-box-title">Alert messages</div>
<div class="main-box-content">
<div class="content-box">
<span class="content-title"><i class="nz-icon nz-icon-jiantou-top colorFFF bg23BF9A"></i>high</span>

View File

@@ -11,7 +11,7 @@
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">Alert list</div>
<div class="right-box-title">Alert messages</div>
<!-- end--标题-->
<!-- begin--表格-->

View File

@@ -5,6 +5,12 @@
.resize-box{
border: none;
}
.project-chart-title{
text-align: center;
}
.nz-chart-dropdown{
height: 75px;
}
</style>
<template>
<div class="nz-chart-resize">
@@ -12,7 +18,7 @@
<div class="resize-box resize-box-echarts" ref="resizeBox">
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'drag-disabled': this.filter.from == 'alertRule'}" :id="'chartTitle'+chartIndex" >
<div class="clearfix project-chart-title" :class="{'drag-disabled': this.filter.from == 'alertRule'}" :id="'chartTitle'+chartIndex" >
<el-popover
v-if="isError"
placement="top-start"
@@ -41,7 +47,7 @@
</span>
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="el-dropdown-link" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon" v-if="filter.from != 'alertRule'"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>

View File

@@ -601,7 +601,7 @@
})
},
//工具栏点击后显示对应内容
popDataShowUpdate(key){
popDataShowUpdate(key,flag){//key 显示对应的弹窗 flag是否不显示工具栏
// console.log(key);
this.popDataShow={
endpoint:false,
@@ -626,6 +626,9 @@
this.popDataShow[key]=true;
})
}
if(this.selNodeId&&!flag){
this.setPopPosition(this.selNodeId);
}
},
//拓扑图放大缩小
zoomChange(num){
@@ -653,7 +656,7 @@
console.log(params);
this_.networkPopClose();
if(!params.edges.length&&!params.nodes.length){
this_.popDataShowUpdate();
this_.popDataShowUpdate('',true);
}
});

View File

@@ -4,7 +4,7 @@
<div class="resize-box resize-box-table" ref="resizeBox">
<div class="vis-network" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle text-right" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<div class="clearfix text-right" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
v-if="isError"
:close-delay=10
@@ -23,11 +23,12 @@
<!--<span class="chart-title-text">{{chartData.title}}</span>-->
<!--<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon&#45;&#45;right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>-->
</span>
<span>
<i class="nz-icon nz-icon-edit float-right" @click="editVisNetworkChange(true)"></i>
<div style="height: 24px">
<i class="nz-icon nz-icon-edit float-right" @click="editVisNetworkChange(true)" v-show="!editVisNetwork"></i>
<i class="nz-icon nz-icon-refresh float-right" @click="reload" v-show="!editVisNetwork"></i>
<!--<i class="nz-icon nz-icon-zoomin float-right"></i>-->
<!--<i class="nz-icon nz-icon-exit-full-screen float-right"></i>-->
</span>
</div>
</span>
</div>
<div class="vis-network-content">
@@ -322,6 +323,10 @@
.nz-icon-edit{
margin-right: 5px;
}
.vis-network .nz-icon-refresh{
margin-right: 15px;
color: #ee9d3f;
}
.table-container{
height: calc(100% - 30px);
}