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

NEZ-290 feat: panel-assetInfo样式调整、resize实现

Browse Source
This commit is contained in:
chenjinsong
2020-06-01 19:10:45 +08:00
parent 5055798afb
commit cde04a6a68
11 changed files with 263 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<style lang="scss">
@import 'chart.scss';
@import './chart.scss';
</style>
<style>
.max-width-90{

274
nezha-fronted/src/components/charts/chart-asset-info.vue
View File

@@ -1,4 +1,10 @@
<style lang="scss">
@import './chart.scss';
</style>
<template>
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-asset" ref="resizeBox">
<div class="chart-asset-info" :id="'chartAssetInfoDiv'+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">
@@ -9,7 +15,7 @@
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
</span>
@@ -20,64 +26,52 @@
</div>
<div class="mt-10 chart-info-container" v-cloak v-show="firstShow" >
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="asset-info-content" >
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-small">
<el-scrollbar style="height: 100%;width:100%;" ref="scrollbar" class="el-scrollbar-normal">
<div style="padding: 0 15px">
<div class="basic-container">
<div class="basic-title" @click="hideElement('basic')">
<div>{{$t('asset.createAssetTab.basicTitle')}}</div>
<div><i :class="{'el-icon-caret-bottom':hideBasic,'el-icon-caret-top':!hideBasic}"></i></div>
<div class="basic-title asset-info-content-title" @click="hideElement('basic')">
<span><i :class="{'el-icon-caret-right':hideBasic,'el-icon-caret-bottom':!hideBasic}"></i></span>
<span>{{$t('asset.createAssetTab.basicTitle')}}</span>
</div>
<div class="basic-content" :class="{'shrink':hideBasic}">
<template v-if="assetInfos.Basic && Object.keys(assetInfos.Basic).length>0">
<div v-for="(item,index) in basicKey" :key="index" class="content-item hover-bg" :class="{'bg-grey':index % 2 == 1}">
<div class="content-item-key">{{item.label}}</div>
<template v-if="item.prop == 'pingStatus'">
<div class="content-item-value">
<div :class="{'active-icon green':assetInfos.Basic[item.prop] == 1,'active-icon red':assetInfos.Basic[item.prop] == 0}" style="margin-top: 0px;"></div><span>{{assetInfos.Basic.pingRtt?assetInfos.Basic.pingRtt+'ms':''}}</span>
<div class="content-item-key">{{item.label}}</div><div
class="content-item-value" v-if="item.prop == 'pingStatus'">
<div class="active-icon" :class="{'green':assetInfos.Basic[item.prop] == 1,'red':assetInfos.Basic[item.prop] != 1}"></div>
<span>{{assetInfos.Basic.pingRtt ? assetInfos.Basic.pingRtt + 'ms' : '&nbsp;'}}</span>
</div>
</template>
<template v-else-if="item.prop == 'alert'">
<div class="content-item-value">
<span class="as-button" :class="{'success':assetInfos.Basic[item.prop]<=0,'danger':assetInfos.Basic[item.prop]>0}">{{assetInfos.Basic[item.prop] + ' ' + $t('overall.active')}}</span>
<div class="content-item-value" v-else-if="item.prop == 'alert'">
<span class="as-button" :class="{'success': assetInfos.Basic[item.prop] <= 0, 'danger': assetInfos.Basic[item.prop] > 0}">{{assetInfos.Basic[item.prop] + ' ' + $t('overall.active')}}</span>
</div>
</template>
<template v-else-if="item.prop == 'state'">
<div class="content-item-value">
<div class="content-item-value" v-else-if="item.prop == 'state'">
{{assetInfos.Basic[item.prop] == 1?$t('asset.createAssetTab.inStock'):$t('asset.createAssetTab.outStock')}}
</div>
</template>
<template v-else>
<div class="content-item-value">
{{assetInfos.Basic[item.prop]}}
<div class="content-item-value" v-else>
{{assetInfos.Basic[item.prop] ? assetInfos.Basic[item.prop] : "&nbsp;"}}
</div>
</template>
</div>
</template>
</div>
</div>
<div class="feature-container">
<div class="feature-title" @click="hideElement('feature')" >
<div>{{$t('asset.createAssetTab.featureTitle')}}</div>
<div><i :class="{'el-icon-caret-bottom':hideFeature,'el-icon-caret-top':!hideFeature}"></i></div>
<div class="feature-title asset-info-content-title" @click="hideElement('feature')" >
<span><i :class="{'el-icon-caret-right':hideFeature,'el-icon-caret-bottom':!hideFeature}"></i></span>
<span>{{$t('asset.createAssetTab.featureTitle')}}</span>
</div>
<div class="feature-content" :class="{'shrink':hideFeature}">
<div v-for="(value,key,index) in assetInfos.Feature" class="content-item" :class="{'bg-grey':index % 2 == 1,'hover-bg':Array.isArray(value) && value.length>0 &&typeof value[0] == 'string'}">
<div class="content-item-key" ><div style="vertical-align: middle">{{key}}</div></div>
<template v-if="typeof value == 'string'">
<div class="content-item-value">{{value}}</div>
</template>
<div v-if="Array.isArray(value) && value.length>0" class="content-item-value">
<template v-if="typeof value[0] == 'string'">
<div class="item-value-sub" v-for="(item,index) in value" :key="index">{{item}}</div>
</template>
<template v-else>
<div class="content-item-key" >{{key}}</div><div
class="content-item-value" v-if="typeof value == 'string'">{{value}}</div><div v-if="Array.isArray(value) && value.length>0" class="content-item-value content-item-value-muti">
<div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(item,index) in value" :key="index">{{item}}</div>
<el-table
v-else
class="nz-table asset-info-table"
:data="value"
tooltip-effect="light"
height="100%"
ref="dataTable"
v-scrollBar:el-table="'large'"
v-scrollBar:el-table="'small'"
>
<el-table-column
:resizable="false"
@@ -93,7 +87,6 @@
</template>
</el-table-column>
</el-table>
</template>
</div>
</div>
</div>
@@ -102,7 +95,9 @@
</el-scrollbar>
</div>
</div>
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
</div>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
</div>
</div>
</template>
@@ -157,9 +152,6 @@
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: [],
@@ -231,11 +223,11 @@
]
};
},
created() {
},
computed: {},
watch: {},
methods: {
startResize(e) {
let vm = this;
this.$chartResizeTool.start(vm, this.data, e);
},
setLabels:function(source){
let labels=[];
source.forEach(item=>{
@@ -268,172 +260,19 @@
return key.replace(/\$_\$/g,' ')
}
},
dragResize:function(e){
var diffWidth =20; //界面的宽度空白的地方的宽度
var chartBoxPadding = 22;
var targetDiv= document.getElementById('chartAssetInfoDiv'+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+chartBoxPadding)+'px';
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
//表格的高度
const chartAssetInfoBox = document.getElementById('chartContainer'+_this.chartIndex);
chartAssetInfoBox.style.height = `${containerHeight-_this.titleHeight}px`;//-75-32+25
}
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+chartBoxPadding)+'px';
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
//表格的高度
const chartAssetInfoBox = document.getElementById('chartContainer'+_this.chartIndex);
chartAssetInfoBox.style.height = `${containerHeight-_this.titleHeight}px`;
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';//图表实际渲染高度，采用个位数字四舍五入
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) {
//更新当前图表数据
_this.data.span= span;
_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;
}
this.$nextTick(()=>{
this.$refs.scrollbar.update();
})
},
startLoading(area){
this.$refs['localLoading'+this.chartIndex].startLoading();
},
endLoading(area){
this.$refs['localLoading'+this.chartIndex].endLoading();
},
clearData(){
resize() {
let container = document.querySelector('#chartAssetInfoDiv' + this.chartIndex + " .chart-info-container");
container.style.height = `calc(100% - ${this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight}px)`;
},
showLoad(chartItem) {
this.$nextTick(() => {
const chartBox = document.getElementById('chartAssetInfoDiv'+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();
});
this.startLoading();
this.divFirstShow = true;
@@ -471,16 +310,6 @@
this.isError = false;
this.errorContent = '';
}
this.$nextTick(() => {
const chartBox = document.getElementById('chartAssetInfoDiv'+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.divFirstShow = true;
this.firstShow = true; // 展示操作按键
@@ -506,28 +335,3 @@
},
};
</script>
<style lang="scss" scoped>
@import './chart-asset-info';
.as-button{
color: white;
padding: 2px 5px;
border-radius: 4px;
}
.success{
background-color: #50d050;
}
.danger{
background-color: #d64f40;
}
</style>
<style>
.asset-info-content .el-scrollbar__view {
height: 100%;
}
.asset-info-table .el-table__body-wrapper{
overflow: inherit;
}
.asset-info-table:hover .ps__rail-x{
opacity: 1 !important;
}
</style>

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

@@ -448,6 +448,7 @@
this.$nextTick(() => {
if (this.dataList.length > 0 ) {
this.dataList.forEach((item,index) => {
this.$refs['editChart'+item.id][0].showLoad(item);//之后要实现
this.setChartSize(item.span, index);//设置该图表宽度
if(!item.isLoaded ){
@@ -589,6 +590,7 @@
}
}else {
if (!isSearch && this.$refs['editChart'+item.id] && this.$refs['editChart'+item.id][0]) {
this.$refs['editChart'+item.id][0].showLoad(item);
}
this.setChartSize(item, realIndex); // 设置该图表宽度
@@ -642,7 +644,6 @@
getChartData(chartInfo, pos, filterType) {
const chartItem = chartInfo;
const index = pos; // 指标
//this.setChartSize(chartItem.span, index); // 设置该图表宽度
if(chartItem.type === 'assetInfo'){
this.getAssetInfoChartData(chartItem);
return;
@@ -1090,8 +1091,39 @@
this.$refs['editChart'+chartInfo.id][0].showLoad(chartInfo);
this.$get('/asset/info?id='+this.additionalInfo.id).then(response=>{
if(response.code == 200){
let data=response.data;
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, data, this.filter.panelId, this.filter);
let data={
Basic:{
sn:'assetInfo Test',
host:'192.168.40.42',
host1:'192.168.40.42',
host2:'192.168.40.42',
host3:'192.168.40.42',
host4:'192.168.40.42',
host5:'192.168.40.42',
host6:'192.168.40.42',
host7:'192.168.40.42',
host8:'192.168.40.42',
host9:'192.168.40.42',
host10:'192.168.40.42',
pingStatus:1,
pingRtt:80,
cpuNum:'8',
memery:'12GB',
memery$_$free:'3GB'
},
Feature:{
CPU:"Intel E500",
Memory:"256GB",
NetworkInterface:["eth0","eth1"],
Disk:[{
mount:"/",
total:"256GB",
free:"128GB",
usageRate:"50%"
}]
}
}
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, response.data, this.filter.panelId, this.filter);
}else{
this.$refs['editChart'+chartInfo.id][0].setData(chartInfo, {}, this.filter.panelId, this.filter, response.msg);
}
@@ -1204,6 +1236,7 @@
this.chartDataCacheGroup.set(duplicateChartId,duplicateChartData);
this.$nextTick(() => {
if (this.$refs['editChart'+duplicateChartId][0]) {
this.$refs['editChart'+duplicateChartId][0].showLoad(duplicateChart);//之后要实现
}
@@ -1287,7 +1320,7 @@
if(chartType!=='url'){
that.getChartDataForSearch(item,index);
} else {
console.info(that.$refs['editChart'+item.id])
that.$refs['editChart'+item.id][0].showLoad(item);
}
}

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

@@ -1,5 +1,5 @@
<style lang="scss">
@import 'chart';
@import './chart.scss';
</style>
<template>
<div class="nz-chart-resize">

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

@@ -1,5 +1,5 @@
<style lang="scss">
@import 'chart';
@import './chart.scss';
</style>
<template>
<div class="nz-chart-resize">

155
nezha-fronted/src/components/charts/chart-url.vue
View File

@@ -1,10 +1,5 @@
<style lang="scss" scoped>
@import 'chart.scss';
</style>
<style>
.max-width-90{
max-width: 90px;
}
<style lang="scss">
@import './chart.scss';
</style>
<template>
<div class="nz-chart-resize">
@@ -181,150 +176,6 @@ export default {
this.setLoadFrameFull();
}
},
dragResize:function(e){
var diffWidth =20; //界面的宽度空白的地方的宽度
var chartBoxPadding = 22;
var targetDiv= document.getElementById('chartUrlDiv'+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+chartBoxPadding)+'px';
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
//表格的高度
const tableBox = document.getElementById('urlContainer'+_this.chartIndex);
tableBox.style.height = `${containerHeight-_this.titleHeight}px`;//-75-32+25
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup = null;
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;
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+chartBoxPadding)+'px';
//chartBox[_this.chartIndex].style.height = `${containerHeight}px`;
//表格的高度
const tableBox = document.getElementById('urlContainer'+_this.chartIndex);
tableBox.style.height = `${containerHeight-_this.titleHeight}px`;
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';//图表实际渲染高度，采用个位数字四舍五入
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) {
//更新当前图表数据
_this.data.span= span;
_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);
}
}
});
}
},
startLoading(area){
if(area==='screen'){
@@ -340,8 +191,6 @@ export default {
this.$refs['localLoading'+this.chartIndex].endLoading();
}
},
clearData(){
},
clearChart(){
this.data = {};
},

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

@@ -200,7 +200,94 @@
}
}
}
.line-chart-block, .chart-table, .chart-single-stat, .chart-url {
.chart-asset-info {
.chart-info-container {
padding-top: 6px;
}
.active-icon {
margin: 0;
}
.asset-info-content {
width: 100%;
height: calc(100% - 10px);
}
.asset-info-content-title {
background-image: linear-gradient(#f5f5f5, #e7e7e7);
font-size: 13px;
color: #505255;
padding-left: 2px;
height: 25px;
line-height: 25px;
}
.basic-content.shrink, .feature-content.shrink {
height: 0;
transform: scaleY(0);
opacity: 0;
}
.basic-content, .feature-content {
height: 100%;
opacity: 1;
transform-origin: top;
transition: all 0.2s linear;
width: 100%;
margin-bottom: 5px;
/*border-left: 1px solid rgb(235, 238, 245);
border-right: 1px solid rgb(235, 238, 245);*/
box-sizing: border-box;
.content-item>div {
display: inline-block;
box-sizing: border-box;
}
.content-item>div:not(.content-item-value-muti) {
padding: 0 3px 0 13px;
}
.content-item {
font-size: 13px;
line-height: 26px;
border-bottom: 1px solid rgb(235, 238, 245);
display: flex;
.content-item-key {
color: #666;
width: 35%;
height: 100%;
}
.content-item-value {
.item-value-sub {
padding: 0 3px 0 13px;
box-sizing: border-box;
}
.item-value-sub:not(:last-of-type) {
border-bottom: 1px solid rgb(235, 238, 245);
}
.nz-table {
th .cell {
height: 25px;
line-height: 25px;
}
td .cell {
min-height: 26px;
line-height: 26px;
}
.el-table__body tr:last-of-type td {
border: none;
}
.el-table__body tr td {
background-color: white;
}
.el-table__body tr:hover>td {
background-color: white;
}
}
border-left: 1px solid rgb(235, 238, 245);
color: #1a1a1a;
width: 65%;
height: 99%;
}
}
}
}
.line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info {
height: 100%;
position: relative;
background-color: white;
@@ -210,7 +297,8 @@
.chartTitle {
text-align: center;
width: 100%;
line-height: 26px;
line-height: 30px;
height: 28px;
padding: 1px 3px 0 3px;
box-sizing: border-box;
.nz-chart-top{

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

@@ -1,5 +1,5 @@
<style lang="scss">
@import 'chart.scss';
@import './chart.scss';
</style>
<template>
<div class="nz-chart-resize">

13
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
View File

@@ -310,15 +310,6 @@
},
/*时间条件查询--end*/
//公用操作
jumpTo(data, id) {
bus.$emit("menu-change", data);
this.$router.push({
path: "/" + data,
query: {
t: +new Date()
}
});
},
getTableData(linkId) {
this.$get('panel', {type: this.from, link: linkId}).then(response => {
if (response.code === 200) {
@@ -397,9 +388,9 @@
} else {
_self.showTopBtn = false;
}
if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
/*if (scrollbarWrap.scrollHeight - scrollbarWrap.scrollTop - scrollbarWrap.offsetHeight < 20) {
_self.$refs.chartList.pageDataList(true, _self.panelId);
}
}*/
}
},
focusInput:function(){

87
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -108,87 +108,6 @@
title: this.$t('dashboard.panel.createPanelTitle')
},
tableHover: false,
/*
pickerOptions: {
shortcuts: [{
text: this.$t("dashboard.panel.recOne"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(start.getHours() - 1);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recFour"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(start.getHours() - 4);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recOneDay"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 1);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.yesterday"),
onClick(picker) {
const start = new Date();
const end = new Date();
start.setDate(start.getDate() - 1);
start.setHours(0);
start.setMinutes(0);
start.setSeconds(0);
end.setDate(end.getDate() - 1);
end.setHours(23);
end.setMinutes(59);
end.setSeconds(59);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recSevenDay"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 7);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recOneMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 30);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.curMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(1);
start.setHours(0);
start.setMinutes(0);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.lastMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(1);
start.setMonth(start.getMonth() - 1);
end.setDate(0);
start.setStart();
end.setEnd();
picker.$emit('pick', [start, end]);
}
}]
},*/
searchTime: [
new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - 1),
new Date(bus.computeTimezone(new Date().getTime()))
@@ -254,17 +173,13 @@
searchLabel: {}, //搜索参数
//---图表相关参数--start
dataList: [], // 数据列表
//searchName: '', // 搜索名称
filter: { // 过滤条件
//productId: 0,
panelId: 0,
start_time: '',
end_time: '',
searchName: ''
},
panelId: 0,
//removeModal: false, // 删除弹出
//deleteObj: {}, // 删除对象
//---图表相关参数--end
}
},
@@ -457,8 +372,6 @@
/*时间条件查询--end*/
//公用操作
jumpTo(data, id) {
//this.$store.state.assetData.moduleData = data
//this.$store.state.assetData.selectedData = id
bus.$emit("menu-change", data);
this.$router.push({
path: "/" + data,

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

@@ -380,16 +380,12 @@ export const chartResizeTool = {
},
start(vm, originalData, event) {
let data = JSON.parse(JSON.stringify(originalData)); //将初始对象复制，后续操作使用复制对象
let shadow; //缩放时底部阴影dom
let box; //图表内容dom
try {
shadow = vm.$refs.resizeShadow;
} catch (e) {
let shadow = vm.$refs.resizeShadow; //缩放时底部阴影dom
if (!shadow) {
shadow = vm.$refs[0].resizeShadow;
}
try {
box = vm.$refs.resizeBox;
} catch (e) {
let box = vm.$refs.resizeBox; //图表内容dom
if (!box) {
box = vm.$refs[0].resizeBox;
}
let chartBlankWidth = this.chartBlankWidth;
@@ -419,7 +415,6 @@ 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; //高的余数
@@ -429,8 +424,8 @@ export const chartResizeTool = {
//将resize-box的宽高设为resize-shadow的宽高
box.style.width = `${shadow.offsetWidth}px`;
box.style.height = `${shadow.offsetHeight}px`;
data.height = box.offsetHeight;
data.span = (box.offsetWidth+chartBlankWidth)/stepWidth;
data.height = Math.round(box.offsetHeight/stepHeight*stepHeight);
data.span = Math.round((box.offsetWidth+chartBlankWidth)/stepWidth);
//请求后台，保存变更
if (data.height != originalData.height || data.span != originalData.span) {
originalData.height = data.height;
@@ -443,7 +438,7 @@ export const chartResizeTool = {
document.removeEventListener("mousemove", moveListener);
document.removeEventListener("mouseup", mouseupListener);
}
function boxStepHandler(width, height) { //宽高变化量，大于0放大小于0缩小等于0不变; return: boolean 是否重绘
function boxStepHandler(width, height) { //param: 宽高变化量，大于0放大，小于0缩小
let widthChange = false;
let heightChange = false;
if (width > stepWidth/2) { //放大shadow宽
@@ -456,10 +451,10 @@ export const chartResizeTool = {
if (widthChange) {
shadowNewWidth = shadow.offsetWidth;
}
if (height > stepHeight/2) { //放大shadow宽
if (height > stepHeight/2) { //放大shadow高
heightChange = true;
shadow.style.height = `${shadow.offsetHeight+stepHeight}px`;
} else if (height <= 0-(stepHeight/2)) { //缩小shadow宽
} else if (height <= 0-(stepHeight/2)) { //缩小shadow高
heightChange = true;
shadow.style.height = `${shadow.offsetHeight-stepHeight}px`;
}
@@ -472,7 +467,11 @@ export const chartResizeTool = {
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类型
box.querySelector(".el-table__body-wrapper")._ps_.update();
//刷新滚动条
let scrollbar = box.querySelector(".el-table__body-wrapper")._ps_;
if (scrollbar) {
scrollbar.update();
}
}
//chart外层宽高调整
let outerBox = document.getElementById(`chart-${data.id}`);