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

feat:新功能

Browse Source 
1.dashboard模块：曲线类型图表实现拖拽改变大小,后台接口已测试，表格类型图表拖拽改变大小，及当标题缩小到最小时超出部分隐藏等样式调整
This commit is contained in:
hanyuxia
2020-03-20 18:47:51 +08:00
parent cfe0ffef05
commit e84fd20593
5 changed files with 320 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@
box-sizing: border-box;
float:left;
padding: 0 10px 10px 10px;
/*position:relative;*/
}
.noData{
text-align: center
@@ -11,16 +12,61 @@
width: calc(100% - 14px);
overflow-x:hidden;/*避免鼠标第一次放到曲线时，x轴出现滚动条后消失*/
}
</style>
<template>
<div class="list-width">
<div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="item.title+'_'+item.id">
<div class="list-width" id="listContainer"><!--v-drag-->
<!--
draggable="true"
@dragstart="handleDragStart($event, item)"
@dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnter($event, item)"
@dragend="handleDragEnd($event, item)"
const drag = {
// 指令的定义
bind: function (el) {
let odiv = el; //获取当前元素
odiv.onmousedown = (e) => {
//算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft;
let disY = e.clientY - odiv.offsetTop;
document.onmousemove = (e)=>{
//用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX;
let top = e.clientY - disY;
//绑定元素位置到positionX和positionY上面
//this.positionX = top;
//this.positionY = left;
//移动当前元素
odiv.style.left = left + 'px';
odiv.style.top = top + 'px';
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
};
}
};
Vue.directive('drag',
drag
)
<draggable v-model="dataList" @chang="change" @start="start" @end="end" :move="move">
-->
<div class="chartBox" v-for="(item, index) in dataList" :key="item.id" :id="item.title+'_'+item.id" style="border:solid 0px red;">
<line-chart-block v-if="item.type === 'line' || item.type === 'bar' ||item.type == 'stackArea' || item.type === 4" :key="'inner' + item.id"
ref="editChart"
@on-refresh-data="refreshChart"
@on-remove-chart-block="removeChart"
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:chart-index="index"
@@ -30,12 +76,15 @@
@on-refresh-data="refreshChart"
@on-search-data="searchData"
@on-remove-chart-block="removeChart"
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:chart-index="index"
:editChartId="'editChartId' + item.id"></chart-table>
</div>
<!--</draggable>-->
<el-row v-if="dataList.length === 0" class="noData"></el-row>
</div>
</template>
@@ -44,6 +93,7 @@ import axios from 'axios';
import bus from '../../libs/bus';
import lineChartBlock from './line-chart-block';
import chartTable from './chart-table';
//import draggable from 'vuedraggable'
export default {
name: 'chartList',
@@ -52,6 +102,7 @@ export default {
components: {
lineChartBlock,
chartTable,
//draggable,
},
data() {
return {
@@ -67,12 +118,49 @@ export default {
isPage:true,//是否分页懒加载
currentRecordNum:0,//懒加载：本次取记录的index，第一次从0开始取，每次取3行
lineNum:3,//每页加载的行数
pagePanelId:''//当前分页的panelId
pagePanelId:'',//当前分页的panelId
dragging: null
};
},
computed: {},
watch: {},
methods: {
change (event) {
console.log('change', event)
},
start (event) {
console.log('start', event)
},
end (event) {
console.log('end', event, this.groups)
},
move (event, orgin) {
console.log('move', event, orgin)
},
handleDragStart(e,item){
this.dragging = item;
},
handleDragEnd(e,item){
this.dragging = null
},
//首先把div变成可以放置的元素，即重写dragenter/dragover
handleDragOver(e) {
e.dataTransfer.dropEffect = 'move'// e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
},
handleDragEnter(e,item){
e.dataTransfer.effectAllowed = "move"//为需要移动的元素设置dragstart事件
if(item === this.dragging){
return
}
const newItems = [...this.dataList]
console.log(newItems)
const src = newItems.indexOf(this.dragging)
const dst = newItems.indexOf(item)
newItems.splice(dst, 0, ...newItems.splice(src, 1))
this.dataList = newItems
},
initCurrentRecordNum(){
this.currentRecordNum = 0;
},
@@ -417,6 +505,12 @@ export default {
this.$emit('on-edit-chart', chart);
}
},
editChartForDrag(chartItem){
let chart = this.dataList.find(item => item.id === chartItem.id);
chart.span = chartItem.span;
chart.height = chartItem.height;
},
// 刷新列表中的一个图表
refreshChart(chartId,searchTime) {
this.dataList.forEach((item, index) => {

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

@@ -41,10 +41,33 @@
border: 1px solid #d8dce1;
padding: 20px 8px 3px;
margin-bottom: 10px;
.vue-resizable-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
cursor: se-resize;
box-sizing: border-box;
}
.vue-resizable-handle:after {
border-right: 2px solid #555;
border-bottom: 2px solid #555;
content: "";
position: absolute;
right: 3px;
bottom: 3px;
width: 5px;
height: 5px;
/*border-right: 2px solid rgba(0,0,0,.4);
border-bottom: 2px solid rgba(0,0,0,.4);*/
box-sizing: inherit;
}
.chartTitle {
text-align: center;
width: 100%;
.nz-chart-top{
width:100%;
}
.el-dropdown-link {
cursor: pointer;
@@ -57,7 +80,19 @@
font-size: 18px;
line-height: 26px;
color: #333;
margin: -3px 0 3px 10px;
margin: -3px 0 3px 3px;
display:flex;
justify-content:center;
align-items:center;
.chart-title-text{
max-width:calc(100% - 20px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.chart-title-icon{
display: inline-block;
}
}
}
.edit:after{

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

@@ -21,7 +21,8 @@
<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">
{{data.title}}<i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i>
<span class="chart-title-text">{{data.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" class="el-dropdown-menu nz-chart-dropdown" style="position: absolute; top: 30px; left: 0px; transform-origin: center top; z-index: 1000;" >
<li @click="refreshChart" class="el-dropdown-menu__item">
@@ -90,6 +91,7 @@
</div>
-->
</el-dialog>
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
</div>
</template>
@@ -303,6 +305,148 @@ export default {
this.screenPageObj.pageSize = val;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj)
},
dragResize:function(e){
var diffWidth =38; //界面的宽度空白的地方的宽度
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;
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;
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;
}
//调整表格大小
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.height = `${containerHeight}px`;
//表格的高度
const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
tableBox.style.height = `${containerHeight-75-32+25}px`;
}
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;
//alert('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);
const chartBox = document.getElementsByClassName('chartBox');
chartBox[_this.chartIndex].style.width = (containerWidth+diffWidth)+'px';
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
//表格的高度
const tableBox = document.getElementById('tableContainer'+_this.chartIndex);
tableBox.style.height = `${containerHeight-75-32+25}px`;
const modifyParams = {
id:_this.data.id,
span:span,
height:(containerHeight+25),
prev:parseInt(_this.data.prev),
next:parseInt(_this.data.next),
}
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) {
//更新当前图表数据
_this.data.span= span;
_this.data.height= containerHeight+25;
_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;
}
},
startLoading(area){
if(area==='screen'){
//this.showLoadingScreen = true;

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

@@ -96,6 +96,7 @@
text-align: center;
width: 100%;
.nz-chart-top{
width:100%;
}
.el-dropdown-link {
cursor: pointer;
@@ -108,7 +109,19 @@
font-size: 18px;
line-height: 26px;
color: #333;
margin: -3px 0 3px 10px;
margin: -3px 0 3px 3px;
display:flex;
justify-content:center;
align-items:center;
.chart-title-text{
max-width:calc(100% - 20px);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.chart-title-icon{
display: inline-block;
}
}
}

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

@@ -26,7 +26,8 @@
<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">
{{data.title}}<i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i>
<span class="chart-title-text">{{data.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<!--
<el-dropdown-menu slot="dropdown" class="nz-chart-dropdown" :popper-append-to-body="false">
@@ -291,7 +292,7 @@
this.divFirstShow = showDiv;
},
dragResize:function(e){
var diffWidth = 38;
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 maxWidth = targetDivContainer.offsetWidth-diffWidth;
@@ -366,12 +367,14 @@
let diffHeight = Math.abs(targetDivHeight-targetDivHeightNew);
if(targetDivHeight>targetDivHeightNew){
let finalDiffHeight = Math.floor(diffHeight/stepHeight)*stepHeight;
//alert('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);
@@ -407,13 +410,17 @@
const modifyParams = {
id:_this.data.id,
span:span,
height:containerHeight,
height:(containerHeight+_this.dataZoomHeight),
prev:parseInt(_this.data.prev),
next:parseInt(_this.data.next),
}
//alert('=55='+JSON.stringify(modifyParams));
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) {
//更新当前图表数据
_this.data.span= span;
_this.data.height= containerHeight+_this.dataZoomHeight;
_this.$emit('on-drag-chart', _this.data);
}else {
if(response.msg){
_this.$message.error(response.msg);