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

fix:修改BUG

Browse Source 
dashboard模块:1 图表拖拽调整大小空白区域调整 2图表只有title部分可进行拖拽，避免拖拽调整大小时样式乱 3 拖拽改变图表位置后台数据更新（目前图表存在拖动时滚动条不滚动的问题）
This commit is contained in:
hanyuxia
2020-03-25 09:21:23 +08:00
parent b4d9f1cb18
commit adb6932593
4 changed files with 136 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -12,18 +12,39 @@
width: calc(100% - 14px);
overflow-x:hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
}
.drag-chart-class{
cursor:move;
.dragChartClass{
cursor:move;/*
border:solid 2px yellow;
color:yellow;
background-color:yellow;
opacity:1;*/
/*background-color:red;
opacity:1*/
}
.chooseClass{
cursor:move;/*
border:solid 2px purple;
color:purple;
background-color:purple;*/
}
.chosenClass .chartTitle{/*
color:orange;
border:solid 2px orange;*/
}
.fallback-class{
cursor:move;
/*background-color:green;
cursor:pointer;*/
}
.chart-ghost-class{
/*opacity:1*/
}
.ghost {/*
opacity: 1;
border:solid 2px green;
color:green;
background-color:green;*/
}
</style>
<template>
@@ -37,15 +58,18 @@
@dragend="handleDragEnd($event, item)" ,ghostClass:'' {scroll:true,forceFallback:true,animation:600,handle:'.drag-icon'
-->
<draggable v-model="dataList" @chang="change" @start="start" @end="end" :move="move"
:scroll-sensitivity="150"
:options="{
dragClass:'drag-chart-class',
dragClass:'dragChartClass',
fallbackClass:'fallback-class',
forceFallback:true,
ghostClass:'chart-ghost-class',
ghostClass:'ghost',
chosenClass:'chooseClass',
scroll:true,
scrollFn:function(offsetX,offsetY,originalEvent,touchEvt,hoverTargetEI){},
animation:150,
handle:'.chartTitle',
}" >
<div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="item.title+'_'+item.id" style="border:solid 0px red;" @dragstart="">
<line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
ref="editChart"
@@ -91,6 +115,7 @@ export default {
return {
filter: {},
dataList: [], // 看板中所有图表信息
//dataListDragTmp:[],
time: {
start: '',
end: '',
@@ -112,14 +137,97 @@ export default {
console.log('change', event)
},
start (event) {
console.log('start', event)
console.log('start', event, this.dataList)
let item = event.item;
let chartTitle = item.querySelector('.chartTitle');
chartTitle.style.background = '#d8dce1';
console.log('start-title',chartTitle);
//this.dataListDragTmp = [...this.dataList];
},
end (event) {
console.log('end', event, this.groups)
let item = event.item;
let chartTitle = item.querySelector('.chartTitle');
chartTitle.style.background = '';
console.log('end', event, this.dataList);
/*
let len = this.dataListDragTmp.length;
let endIndex = len-1;
let oldIndex = event.oldIndex;
if(oldIndex===0){//挪动之前为第一个元素
let oldNextItem = this.dataListDragTmp[oldIndex+1];
let nextItem = this.dataList.find(item => item.id === oldNextItem.id);
nextItem.prev = 0;
}else if(oldIndex===endIndex){//挪动之前为最后一个元素
let oldPrevItem = this.dataListDragTmp[oldIndex-1];
let prevItem = this.dataList.find(item => item.id === oldPrevItem.id);
prevItem.next = -1;
}else{//挪动之前为中间元素
let oldPrevItem = this.dataListDragTmp[oldIndex-1];
let oldNextItem = this.dataListDragTmp[oldIndex+1];
let nextItem = this.dataList.find(item => item.id === oldNextItem.id);
let prevItem = this.dataList.find(item => item.id === oldPrevItem.id);
prevItem.next = oldNextItem.id;
nextItem.prev = oldPrevItem.id;
}
let newIndex = event.newIndex;
let newItem = this.dataList[newIndex];
if(newIndex===0){//挪动之后为第一个元素
let newNextItem = this.dataList[newIndex+1];
newNextItem.prev = newItem.id;
}else if(newIndex===endIndex){//挪动之后为最后一个元素
let newPrevItem = this.dataList[newIndex-1];
newPrevItem.next =newItem.id;
}else{//挪动之后为中间元素
let newPrevItem = this.dataList[newIndex-1];
let newNextItem = this.dataList[newIndex+1];
newPrevItem.next = newItem.id;
newNextItem.prev = newItem.id;
}
*/
let newIndex = event.newIndex;
let newItem = this.dataList[newIndex];
if(newIndex===0){//挪动之后为第一个元素
let newNextItem = this.dataList[newIndex+1];
newItem.prev = 0;
newItem.next = newNextItem.id;
}else if(newIndex===(this.dataList.length-1)){//挪动之后为最后一个元素
let newPrevItem = this.dataList[newIndex-1];
newItem.prev = newPrevItem.id;
newItem.next = -1;
}else{//挪动之后为中间元素
let newNextItem = this.dataList[newIndex+1];
let newPrevItem = this.dataList[newIndex-1];
newItem.prev = newPrevItem.id;
newItem.next = newNextItem.id;
}
//更新图表prev和next
const modifyParams = {
id:newItem.id,
span:newItem.span,
height:newItem.height,
prev:newItem.prev,
next:newItem.next,
}
this.$put('panel/'+ this.pagePanelId+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) {
//let item = this.dataList.find(item => item.id === newItem.id);
}else {
if(response.msg){
this.$message.error(response.msg);
}else if(response.error){
this.$message.error(response.error);
}else {
this.$message.error(response);
}
}
});
},
move (event, orgin) {
console.log('move', event, orgin)
},
/*
handleDragStart(e,item){
this.dragging = item;
},
@@ -144,6 +252,7 @@ export default {
this.dataList = newItems
},
*/
initCurrentRecordNum(){
this.currentRecordNum = 0;
},

5
nezha-fronted/src/components/charts/chart-table.scss
View File

@@ -33,7 +33,7 @@
}
}
.chart-table {
width: calc(100% - 18px);
width: 100%;
height: 100%;//calc(100% - 40px);
// min-height: 500px;
position: relative;
@@ -71,6 +71,9 @@
.chartTitle:hover {
background-color:#d8dce1;
}
.dragTitle{
background-color:#d8dce1;
}
.chartTitle {
text-align: center;
width: 100%;

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

@@ -17,7 +17,7 @@
</div>
</div>
-->
<div class="clearfix chartTitle" :id="'chartTitle'+chartIndex">
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
@@ -163,6 +163,7 @@ export default {
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
firstShow: false, // 默认不显示操作按钮,
caretShow:false,
dragTitleShow:false,
dropdownMenuShow:false,
minHeight:200,
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
@@ -310,7 +311,8 @@ export default {
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj)
},
dragResize:function(e){
var diffWidth =38; //界面的宽度空白的地方的宽度
var diffWidth =20; //界面的宽度空白的地方的宽度
var chartBoxPadding = 22;
var targetDiv= document.getElementById('chartTableDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
var targetDivContainer= document.getElementById('listContainer'); //e.target.parentNode.parentNode;.children[0]
var maxWidth = targetDivContainer.offsetWidth-diffWidth;
@@ -367,7 +369,7 @@ export default {
let containerHeight = parseInt(targetDiv.style.height);
let containerWidth = parseInt(targetDiv.style.width);
const chartBox = document.getElementsByClassName('chartBox');
chartBox[_this.chartIndex].style.width = (containerWidth+diffWidth)+'px';
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
//表格的高度
const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
@@ -418,7 +420,7 @@ export default {
let containerWidth = parseInt(targetDiv.style.width);
const chartBox = document.getElementsByClassName('chartBox');
chartBox[_this.chartIndex].style.width = (containerWidth+diffWidth)+'px';
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
//表格的高度
const tableBox = document.getElementById('tableContainer'+_this.chartIndex);

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

@@ -294,9 +294,10 @@
this.divFirstShow = showDiv;
},
dragResize:function(e){
var diffWidth = 38;//界面的宽度空白的地方的宽度
var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //e.target.parentNode.parentNode;.children[0]
var targetDivContainer= document.getElementById('listContainer'); //e.target.parentNode.parentNode;.children[0]
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;
@@ -355,7 +356,7 @@
let containerHeight = parseInt(targetDiv.style.height);
let containerWidth = parseInt(targetDiv.style.width);
const chartBox = document.getElementsByClassName('chartBox');
chartBox[_this.chartIndex].style.width = (containerWidth+diffWidth)+'px';
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
_this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
}
}
@@ -405,7 +406,7 @@
if(_this.echartStore){
let divHeight = _this.$refs.legendArea.offsetHeight;
const chartBox = document.getElementsByClassName('chartBox');
chartBox[_this.chartIndex].style.width = (containerWidth+diffWidth)+'px';
chartBox[_this.chartIndex].style.width = (containerWidth+chartBoxPadding)+'px';
_this.echartStore.resize({height:(containerHeight-divHeight-_this.titleHeight)});
}