fix:修改BUG

dashboard模块
1.panel 图表tooltip在鼠标移出图表区时,无法隐藏
2.调整图表区域的空白(曲线图,datazoom,legend)
3.panel下拉列表限制最大宽度,超长内容 ... 显示,鼠标悬浮显示全部内容,列表框宽度固定宽度,增加border效果
This commit is contained in:
hanyuxia
2020-02-24 20:31:25 +08:00
parent 0d4b188800
commit c7caf1ef58
3 changed files with 69 additions and 21 deletions

View File

@@ -19,7 +19,7 @@
color:lightgray;
}
.legend-container{
width: calc(100% - 130px);
width: calc(100% - 30px);
max-height:80px;
min-height:40px;
overflow-y: auto;

View File

@@ -33,7 +33,7 @@
</div>
</div>
<div class="line-area" style="border:solid 0px red;" ref="lineChartArea" id="lineChartArea" v-show="firstShow"></div>
<div class="line-area" ref="lineChartArea" id="lineChartArea" v-show="firstShow"></div>
<div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow">
<div v-for="(item, index) in legendList" :title="item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
@@ -344,7 +344,7 @@
trigger: 'axis',
confine:false,
extraCssText:'z-index:1000;',
enterable:true,
/*enterable:true, 导致tooltip不消失显示多个tooltip*/
position:function(point,params,dom,rect,size){
dom.style.transform = "translateZ(0)";
//提示框位置
@@ -510,10 +510,10 @@
grid: {
//height:"50%",
top: 13,
left: 65,
right: 45,
containLabel: false,
bottom:70,//156
left: 0,
right: 30,
containLabel: true,
bottom:35,//156
},
dataZoom: [{
type: 'slider',
@@ -522,7 +522,9 @@
start: 0,
end: 100,
height:25,
bottom:10//96
bottom:10,//96
left:40,
right:48,
}
/*
, {

View File

@@ -10,14 +10,22 @@
<div class="content-right">
<div class="top-tools">
<div>
<el-dropdown @command="panelChange" trigger="click">
<span class="el-dropdown-link">
{{showPanel.name}}<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" >
<el-row :gutter="10" class="el-dropdown-link" style="">
<el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
<el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
</el-row>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown" >
<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
<el-dropdown-item v-for="item in panelData" :key="item.id+1"
:class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">{{item.name}}
:class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
<!--{{item.name}}-->
<el-row :gutter="10" class="panel-list-width" >
<el-col :span="19" class="panel-list-item" :title="item.name">{{item.name}}</el-col>
<el-col :span="2"><span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span></el-col>
<el-col :span="1">&nbsp;</el-col>
<el-col :span="2"><span class="panel-dropdown-btn" @click.stop="toEdit(item)"><i class="el-icon-edit-outline" ></i></span></el-col>
</el-row>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@@ -597,6 +605,38 @@
border-radius: 5px;
}
.panel-list-width {
width:240px;
}
.panel-dropdown-title {
line-height:25px;
padding-left:5px;
margin-left:10px;
text-align:left;
border-radius:4px;
width:120px;
height:25px;
border:solid 1px #d8dce1;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.panel-list-title {
min-height:25px;
width:100px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.panel-list-item {
width:190px;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.content-right-option {
cursor: pointer;
display: inline-block;
@@ -703,9 +743,15 @@
.nz-dashboard-dropdown {
height: 300px;
overflow-y: auto;
left:210px !important;
li {
padding: 0 20px !important;
/*padding: 0 20px !important;*/
padding-left:20px !important;
padding-right:0px !important;
width:240px;
white-space:nowrap;
overflow-x:hidden;
text-overflow:ellipsis;
}
}