style: 拓扑图 细节优化
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<!-- end--顶部按钮-->
|
||||
|
||||
<!-- begin--标题-->
|
||||
<div class="right-box-title">Alert list</div>
|
||||
<div class="right-box-title">Alert messages</div>
|
||||
<!-- end--标题-->
|
||||
|
||||
<!-- begin--表格-->
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@@ -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--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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user