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

feat: 单值型图表resize

Browse Source
This commit is contained in:
陈劲松
2020-05-31 17:40:55 +08:00
parent 6f6082d07c
commit 061056b22b
5 changed files with 221 additions and 364 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
nezha-fronted/src/components/charts/chart-single-stat.vue
View File

@@ -1,12 +1,10 @@
<style lang="scss" scoped>
@import './chart-single-stat.scss';
</style>
<style>
.max-width-90{
max-width: 90px;
}
<style lang="scss">
@import './line-chart-block.scss';
</style>
<template>
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-single" ref="resizeBox">
<div class="chart-single-stat" :id="'chartSingleStatDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
@@ -41,7 +39,6 @@
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
</ul>
</el-dropdown>
</div>
<div class="mt-10 single-stat-container" v-cloak v-show="firstShow" >
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="single-stat-content" >
@@ -65,7 +62,9 @@
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
</div>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
</div>
</div>
</template>
@@ -107,7 +106,6 @@ export default {
seriesItemScreen:[],//全屏数据
serieSingleStat:'',
images: '',
//toolbox: false,
loading:Object,
items: {
metric_name: [], // 每条数据列名称
@@ -126,9 +124,6 @@ export default {
caretShow:false,
dragTitleShow:false,
dropdownMenuShow:false,
minHeight:200,
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
titleHeight:38,//title-height:28,magrin-bottom:10
divFirstShow:false,
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
oldSearchTime: [],
@@ -139,6 +134,10 @@ export default {
computed: {},
watch: {},
methods: {
startResize(e) {
let vm = this;
this.$chartResizeTool.start(vm, this.data, e);
},
dragResize:function(e){
var diffWidth =20; //界面的宽度空白的地方的宽度
var chartBoxPadding = 22;
@@ -300,8 +299,6 @@ export default {
this.$refs['localLoading'+this.chartIndex].endLoading();
}
},
clearData(){
},
showLoad(chartItem) {
this.$nextTick(() => {
const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
@@ -380,6 +377,9 @@ export default {
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;
},
resize(chartItem) {
document.querySelector('#chartSingleStatDiv' + this.chartIndex + " .single-stat-container").style.height = `calc(100% - ${this.$chartResizeTool.titleHeight}px)`;
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
if(errorMsg && errorMsg!==''){
@@ -403,14 +403,7 @@ export default {
this.endLoading('screen');
}else{
this.$nextTick(() => {
const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
if(height<this.minHeight){
height = this.minHeight;
}
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
const singleStatBox = document.getElementById('chartContainer'+this.chartIndex);
singleStatBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
this.resize(chartItem);
});
this.divFirstShow = true;
@@ -431,7 +424,6 @@ export default {
this.oldSearchTime[0] = this.searchTime[0];
this.oldSearchTime[1] = this.searchTime[1];
}
this.endLoading();
}
},

17
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -41,7 +41,7 @@
</el-dropdown>
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="290" :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table>
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight" :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" ></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260">
<template slot-scope="scope">
@@ -116,6 +116,7 @@ export default {
},
data() {
return {
tableHeight: 0,
data: {}, // 该图表信息,chartItem
unit:{},
isError:false,
@@ -224,13 +225,13 @@ export default {
}
},
resize(chartItem) {
let height = Math.round(chartItem.height/this.$chartResizeTool.stepHeight)*this.$chartResizeTool.stepHeight;//图表高度四舍五入
if(height < this.$chartResizeTool.minHeight){
height = this.$chartResizeTool.minHeight;
}
const tableBox = document.getElementById('tableContainer'+this.chartIndex);
tableBox.style.height = `${height-this.$refs.Pagination.$el.offsetHeight-this.$chartResizeTool.titleHeight-this.$chartResizeTool.chartBlankHeight-this.$chartResizeTool.chartTableBlankHeight}px`;
tableBox.querySelector(".el-table__body-wrapper")._ps_.update();
let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
container.style.height = `calc(100% - ${deHeight}px)`;
this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
this.$nextTick(() => {
container.querySelector(".el-table__body-wrapper")._ps_.update();
});
},
showLoad(chartItem) {
//设置高度 chart-table

18
nezha-fronted/src/components/charts/line-chart-block.scss
View File

@@ -179,7 +179,23 @@
}
}
}
.line-chart-block, .chart-table {
.chart-single-stat {
width: 100%;
.single-stat-container {
padding-left: 8px;
padding-right: 8px;
display: table;
text-align: center;
width: calc(100% - 16px);
.single-stat-content{
text-align:center;
vertical-align: middle;
display:table-cell;
font-size:30px;
}
}
}
.line-chart-block, .chart-table, .chart-single-stat {
height: 100%;
position: relative;
background-color: white;

151
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -230,158 +230,7 @@
})
}
},
dragResize:function(e){
this.$refs.shadow.classList.add("resize-shadow-active");
var diffWidth = 20;//界面的宽度空白的地方的宽度
var chartBoxPadding = 20;
var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
var targetDivContainer= document.getElementById('listContainer'); //
var maxWidth = targetDivContainer.offsetWidth-diffWidth;
var minWidth = maxWidth/12;
var stepWidth = maxWidth/12;
var stepHeight = 10;
//得到点击时该容器的宽高：
var targetDivHeight=targetDiv.offsetHeight;
var targetDivWidth=targetDiv.offsetWidth;
var startY=e.clientY;
var startX=e.clientX;
var _this=this;
//var heightTmp = targetDivHeight;
//var widthTmp = targetDivWidth;
document.onmousemove=function(e){
e.preventDefault();
//得到鼠标拖动的宽高距离：取绝对值
var distY=Math.abs(e.clientY-startY);
var distX=Math.abs(e.clientX-startX);
//往上方拖动：
if( e.clientY < startY){
targetDiv.style.height=targetDivHeight-distY+'px';
//heightTmp = targetDivHeight-distY;
}
if( e.clientX < startX){
targetDiv.style.width=targetDivWidth-distX+'px';
//widthTmp = targetDivWidth-distX;
}
//往下方拖动：
if (e.clientY > startY) {
targetDiv.style.height=(targetDivHeight+distY)+'px';
//heightTmp = targetDivHeight+distY;
}
if (e.clientX > startX) {
targetDiv.style.width=(targetDivWidth+distX)+'px';
//widthTmp = targetDivWidth+distX;
}
if(parseInt(targetDiv.style.height)<=_this.minHeight){
targetDiv.style.height=_this.minHeight+'px';
//heightTmp = _this.minHeight;
}
if(parseInt(targetDiv.style.width)>=maxWidth){
targetDiv.style.width=maxWidth+'px';
//widthTmp = maxWidth;
}
if(parseInt(targetDiv.style.width)<=minWidth){
targetDiv.style.width=minWidth+'px';
//widthTmp = minWidth;
}
//调整图表大小
if(_this.echartStore){
let divHeight = _this.$refs.legendArea.offsetHeight;
let containerHeight = parseInt(targetDiv.style.height);
let containerWidth = parseInt(targetDiv.style.width);
const chartBox = document.getElementsByClassName('chartBox');
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
_this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
}
};
document.onmouseup=function(){
let targetDivHeightNew = parseInt(targetDiv.style.height);
//let targetDivHeightNew = heightTmp
let targetDivWidthNew = parseInt(targetDiv.style.width);
//let targetDivWidthNew = widthTmp;
let diffHeight = Math.abs(targetDivHeight-targetDivHeightNew);
if(targetDivHeight>targetDivHeightNew){
let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
//console.log('oldWidth='+targetDivHeight+"===diffHeight+"+diffHeight+"==finalDiffHeight="+finalDiffHeight);
targetDiv.style.height = (targetDivHeight-finalDiffHeight)+'px';
}
if(targetDivHeight<targetDivHeightNew){
let finalDiffHeight = Math.ceil(diffHeight/stepHeight)*stepHeight;
targetDiv.style.height = (targetDivHeight+finalDiffHeight)+'px';
}
var span = _this.data.span;
if(targetDivWidth>targetDivWidthNew){
span = Math.floor((targetDivWidthNew*12)/maxWidth);
let finalWidth = Math.floor((targetDivWidthNew*12)/maxWidth)*stepWidth;
if((finalWidth)<minWidth){
targetDiv.style.width=minWidth+'px';
span = 1;
}else {
targetDiv.style.width = finalWidth+'px';
}
}
if(targetDivWidth<targetDivWidthNew){
span = Math.ceil((targetDivWidthNew*12)/maxWidth);
let spanUnit = Math.ceil((targetDivWidthNew*12)/maxWidth);
let finalWidth = spanUnit*stepWidth;
if(finalWidth>maxWidth || spanUnit===12){
targetDiv.style.width=maxWidth+'px';
span = 12;
}else {
targetDiv.style.width = finalWidth+'px';
}
}
//调整图表大小
let containerHeight = parseInt(targetDiv.style.height);
let containerWidth = parseInt(targetDiv.style.width);
if(_this.echartStore){
let divHeight = _this.$refs.legendArea.offsetHeight;
const chartBox = document.getElementsByClassName('chartBox');
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
_this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
}
const modifyParams = {
id:_this.data.id,
span:span,
height:(containerHeight+_this.chartSpaceHeight),
prev:parseInt(_this.data.prev),
next:parseInt(_this.data.next),
};
targetDiv.style.height = (Math.round((containerHeight+_this.chartSpaceHeight)/10)*10-_this.chartSpaceHeight)+'px';//图表实际渲染高度，采用个位数字四舍五入
//alert('=55='+JSON.stringify(modifyParams));
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) {
//更新当前图表数据
_this.data.span= span;re
_this.data.height= containerHeight+_this.chartSpaceHeight;
_this.$emit('on-drag-chart', _this.data);
}else {
if(response.msg){
_this.$message.error(response.msg);
}else if(response.error){
_this.$message.error(response.error);
}else {
_this.$message.error(response);
}
}
});
document.onmousemove=null;
document.onmouseup = null;
}
},
clickLegend(legendName,index){
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGrey[index];
if(this.echartStore){

7
nezha-fronted/src/tools.js
View File

@@ -419,6 +419,7 @@ export const chartResizeTool = {
//调整resize-box的宽高
box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`;
box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
//调整
//监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
let remainderWidth = (box.offsetWidth+chartBlankWidth-shadowNewWidth)%stepWidth; //宽的余数
let remainderHeight = (box.offsetHeight+chartBlankHeight-shadowNewHeight)%stepHeight; //高的余数
@@ -467,13 +468,11 @@ export const chartResizeTool = {
}
if (widthChange || heightChange) {
//chart重绘
//step时chart重绘
if (box.classList.contains("resize-box-echarts")) { //echarts类型
vm.echartStore.resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight});
} else if (box.classList.contains("resize-box-table")) { //table类型
vm.$nextTick(() => {
vm.resize({height: shadow.offsetHeight});
});
box.querySelector(".el-table__body-wrapper")._ps_.update();
}
//chart外层宽高调整
let outerBox = document.getElementById(`chart-${data.id}`);