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

feat:新功能

Browse Source 
1 增加图表类型singleStat：新增，修改，删除，全屏，列表显示图表数据，拖拽改变大小，拖拽改变位置，按时间查询，刷新，预览
This commit is contained in:
hyx
2020-05-07 21:02:09 +08:00
parent 7f15d3563d
commit de1b85b236
9 changed files with 1156 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -92,10 +92,19 @@
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:chart-index="index"
:editChartId="'editChartId' + item.id"></line-chart-block>
<chart-single-stat v-if="item.type === 'singleStat'" :ref="'editChart'+item.id" :key="'inner' + item.id"
@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-single-stat>
<chart-table v-if="item.type === 'table'" :ref="'editChart'+item.id" :key="'inner' + item.id"
@on-refresh-data="refreshChart"
@on-search-data="searchData"
@@ -126,6 +135,7 @@ import bus from '../../libs/bus';
import lineChartBlock from './line-chart-block';
import chartTable from './chart-table';
import chartUrl from './chart-url';
import chartSingleStat from './chart-single-stat';
import draggable from 'vuedraggable'
export default {
@@ -136,6 +146,7 @@ export default {
lineChartBlock,
chartTable,
chartUrl,
chartSingleStat,
draggable,
},
data() {
@@ -542,7 +553,6 @@ export default {
this.dataTotalListBak.forEach((item)=>{
chartListTmp.push(item);
});
//chartListTmp = [...this.dataTotalListBak];
}
this.dataTotalList = [...chartListTmp];
@@ -621,10 +631,6 @@ export default {
};
if (!param.query) delete param.query;
//根据panelId获得panel下的所有图表
//let searchTitleStr = '';
//if(this.filter.searchName&&this.filter.searchName!=''){
//searchTitleStr = '?title='+this.filter.searchName;
//}
this.$get('panel/'+ params.panelId+'/charts').then(response => {
if (response.code === 200) {
if(response.data.list){
@@ -651,12 +657,6 @@ export default {
this.dataList = this.dataTotalList;
}
this.$nextTick(() => {
/*
if (this.dataList.length > 0 && this.$refs.editChart) {
this.$refs.editChart.forEach((item, i) => {
item.showLoad(this.dataList[i]);//之后要实现
});
}*/
if (this.dataList.length > 0 ) {
this.dataList.forEach((item) => {
this.$refs['editChart'+item.id][0].showLoad(item);//之后要实现
@@ -678,12 +678,14 @@ export default {
let chartType = item.type;
if(chartType!=='url'){
if(isSearch){
this.getChartDataForSearch(item,realIndex);///？？？
//this.getChartData(item, realIndex);
this.getChartDataForSearch(item,realIndex);
}else {
this.getChartData(item, realIndex);
}
}else {
if (!isSearch && this.$refs['editChart'+item.id] && this.$refs['editChart'+item.id][0]) {
this.$refs['editChart'+item.id][0].showLoad(item);
}
this.setSize(item.span, realIndex); // 设置该图表宽度
}
});
@@ -700,6 +702,7 @@ export default {
let filter = chartData.filter;
let legend = chartData.legend;
let series = chartData.series;
let singleStatRlt = chartData.singleStatRlt;
if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0) {
if (chartItem.type === 'table') {//表格
if (filterType === 'showFullScreen') {//全屏查询
@@ -717,12 +720,66 @@ export default {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
panelId, filter, legend,'',errorMsg);
}
}else if(chartItem.type ==='singleStat'){
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter, filterType,errorMsg);
} else {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter,'',errorMsg);
}
}
}
}else {
this.getChartData(chartItem, realIndex);
}
},
/*
getSingleStatRlt(statistics,result){
let dataArray = [];
if(result){
result.forEach((item)=>{
dataArray.push(item[1]);
})
}
let statisticsRlt = '';
if(dataArray.length>0){
if(statistics==='min'){//min：最小值
statisticsRlt = dataArray.reduce(function(a , b){
return b < a ? b : a;
});
}else if(statistics==='max'){// max：最大值
statisticsRlt = dataArray.reduce(function(a , b){
return b > a ? b : a;
});
}else if(statistics==='average'){// average：平均值
let sum = 0;
dataArray.forEach((item)=>{
sum =Number(sum) + Number(item);
})
statisticsRlt = sum/dataArray.length;
}else if(statistics==='total'){//total：总计
dataArray.forEach((item)=>{
statisticsRlt =Number(statisticsRlt) + Number(item);
})
}else if(statistics==='first'){//first：第一个值
statisticsRlt = dataArray[0];
}else if(statistics==='last'){// last：最后一个值
statisticsRlt = dataArray[dataArray.length-1];
}else if(statistics==='range'){//range : max - min
let min = dataArray.reduce(function(a , b){
return b < a ? b : a;
});
let max = dataArray.reduce(function(a , b){
return b > a ? b : a;
});
statisticsRlt = max-min;
}else if(statistics==='different'){//different : last - first
statisticsRlt = dataArray[dataArray.length-1]-dataArray[0];
}
}
return statisticsRlt;
},*/
// 获取一个图表具体数据,图表信息，图表位置index
getChartData(chartInfo, pos, filterType) {
const chartItem = chartInfo;
@@ -732,11 +789,6 @@ export default {
// 没有数据的设置提示信息暂无数据-针对每一个图
if (len === 0) {
this.$nextTick(() => {
/*
if(this.$refs.editChart[index]){
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？
}*/
if(this.$refs['editChart'+chartItem.id] && this.$refs['editChart'+chartItem.id].length>0){
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId, this.filter);//????怎么设置的无数据？？
}
@@ -774,6 +826,7 @@ export default {
axios.all(axiosArr).then((res) => {
if (res.length > 0) {
const series = [];
let singleStatRlt = '';
const legend = [];
const tableData = [];
const sumData = {
@@ -788,8 +841,17 @@ export default {
if (response.status === 'success') {
errorMsg = "";
if (response.data.result) {
// console.log(response.data.result)
// 循环处理每个elements下获取的数据列
if(chartItem.type==='singleStat'){
if(response.data.result.length===1){
let statistics = chartItem.param.statistics;
if(response.data.result[0].values){
singleStatRlt = bus.getSingleStatRlt(statistics,response.data.result[0].values);
}
}else if(response.data.result.length > 1){
singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
}
}else {
response.data.result.forEach((queryItem,resIndex) => {
const seriesItem = {
theData: {
@@ -885,6 +947,7 @@ export default {
}
});
}
}
}else{
if(response.msg){
//this.$message.error(response.msg);
@@ -903,6 +966,7 @@ export default {
const chartData = {
chartItem:chartItem,
series:series,
singleStatRlt:singleStatRlt,
legend:legend,
tableData:tableData,
panelId:this.filter.panelId,
@@ -930,6 +994,14 @@ export default {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, series,
this.filter.panelId, this.filter, legend,'',errorMsg);
}
} else if(chartItem.type ==='singleStat'){
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter, filterType,errorMsg);
} else {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, singleStatRlt,
this.filter.panelId, this.filter,'',errorMsg);
}
}
}
} else {
@@ -951,6 +1023,14 @@ export default {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, [], this.filter.panelId,
this.filter);
}
}else if(chartItem.type ==='singleStat'){
if (filterType === 'showFullScreen') {//全屏查询
this.$refs['editChart'+chartItem.id][0].setData(chartItem, '',
this.filter.panelId, this.filter, filterType);
} else {
this.$refs['editChart'+chartItem.id][0].setData(chartItem, '',
this.filter.panelId, this.filter);
}
}
}
}

182
nezha-fronted/src/components/charts/chart-single-stat.scss Normal file
View File

@@ -0,0 +1,182 @@
/* ---------edit-chart-move--------- */
.clearfix:after{
display: block;
content: "";
clear: both;
}
.clearfix{
margin-bottom: 10px;
}
.loading-font{
color:#232f3e !important;
}
.dialog-tool {
margin-right: 40px;
}
.hidden{
visibility: hidden;
}
.visible{
visibility: visible;
}
.nz-chart-dropdown {
height: 147px;
li {
/*padding: 0 20px !important;*/
padding-left:15px !important;
padding-right:0px !important;
width:140px;
text-align: left;
i {
margin-right: 10px;
}
}
}
.chart-single-stat {
width: 100%;
height: 100%;//calc(100% - 40px);
position: relative;
background: #FFF;
border: 1px solid #d8dce1;
padding: 0px 0px;
margin-bottom: 10px;
padding-bottom: 3px;
.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;
}
}
.single-stat-screen-container{
height:100%;
display:table;
text-align:center;
width:calc(100% - 16px);
color:#000;
.single-stat-content{
text-align:center;
vertical-align: middle;
display:table-cell;
font-size:30px;
}
}
.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;
box-sizing: inherit;
}
.chartTitle:hover {
background-color:#d8dce1;
}
.dragTitle{
background-color:#d8dce1;
}
.chartTitle {
text-align: center;
width: 100%;
line-height: 28px;
.nz-chart-top{
width:100%;
}
.el-dropdown-link {
cursor: move;
}
.el-icon-arrow-down {
font-size: 12px;
}
.chart-title {
font-weight: bold;
font-size: 18px;
line-height: 26px;
color: #333;
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;
cursor: pointer;
}
.chart-title-icon{
display: inline-block;
cursor: pointer;
}
}
}
.edit:after{
display: block;
content: "";
clear: both;
}
.button-panel-height{
height:26px;
}
.button-panel-height button{
height:26px;
}
.edit {
position: absolute;
right: 20px;
top: 17px;
z-index: 10;
}
.chart-select {
position: absolute;
left: 40px;
top: 25px;
z-index: 10;
font-size: 14px;
.chart-select-btn {
margin-right: 10px;
cursor: pointer;
&.active {
color: #5aacff;
}
}
}
/*没有数据显示*/
.null {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
font-size: 24px;
font-weight: 600;
}
.element-bottom-border {
border-bottom: 1px solid #dfe7f2;
margin-bottom:-20px;
}
.element-top-border {
padding-top: 10px;
border-top: 1px solid #dfe7f2;
margin-top:-25px;
}
}

428
nezha-fronted/src/components/charts/chart-single-stat.vue Normal file
View File

@@ -0,0 +1,428 @@
<style lang="scss" scoped>
@import './chart-single-stat.scss';
</style>
<style>
.max-width-90{
max-width: 90px;
}
</style>
<template>
<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">
<el-popover
v-if="isError"
:close-delay=10
placement="top-start"
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" style="" 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>
</el-popover>
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<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: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
<li @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<li @click="editChart" class="el-dropdown-menu__item">
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
<li @click="removeChart" class="el-dropdown-menu__item">
<i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<li @click="showAllScreen" class="el-dropdown-menu__item">
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</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" >
{{serieSingleStat}}
</div>
</div>
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')"
:visible.sync="screenModal"
width="96%" @close="screenModal = false" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
</div>
</div>
<div class="single-stat-screen-container" >
<div id="chartScreenContainer" ref="chartScreenContainer" class="single-stat-content" >
{{serieSingleStat}}
</div>
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
</div>
</template>
<script>
import bus from '../../libs/bus';
import {Loading} from 'element-ui';
import chartDataFormat from './chartDataFormat'
import loading from "../common/loading";
import timePicker from '../common/timePicker'
export default {
name: 'chartSingleStat',
components: {
'loading': loading,
'time-picker':timePicker
},
props: {
// 看板id
panelId: {
type: Number,
default: 0,
},
editChartId: {
type: String,
default: 'editChartId',
},
chartIndex:{
type: Number,
default: 0,
}
},
data() {
return {
data: {}, // 该图表信息,chartItem
unit:{},
isError:false,
errorContent:'',
seriesItem: [], // 保存信息
seriesItemScreen:[],//全屏数据
serieSingleStat:'',
images: '',
//toolbox: false,
loading:Object,
items: {
metric_name: [], // 每条数据列名称
xAxis: [],
theData: [], // series数据组
},
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
firstLoad: false, // 是否第一次加载
//showLoading:true,
//showLoadingScreen:false,
//showTable:true,
chartType: 'table', // 图表类型
screenModal: false,
// 查询数据使用
filter: {
start_time: '',
end_time: '',
},
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
firstShow: false, // 默认不显示操作按钮,
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: [],
};
},
created() {
},
computed: {},
watch: {},
methods: {
dragResize:function(e){
var diffWidth =20; //界面的宽度空白的地方的宽度
var chartBoxPadding = 22;
var targetDiv= document.getElementById('chartSingleStatDiv'+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('chartContainer'+_this.chartIndex);
tableBox.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 tableBox = document.getElementById('chartContainer'+_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),
}
_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;
}
},
startLoading(area){
if(area==='screen'){
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
}else {
//this.showLoading = true;
this.$refs['localLoading'+this.chartIndex].startLoading();
}
},
endLoading(area){
if(area==='screen'){
//this.showLoadingScreen = false;
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
}else {
//this.showLoading = false;
this.$refs['localLoading'+this.chartIndex].endLoading();
}
},
clearData(){
},
showLoad(chartItem) {
//设置高度 chart-table
this.$nextTick(() => {
const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
let height = chartItem.height;
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.startLoading();
this.divFirstShow = true;
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
this.startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
},
// 编辑图表
editChart() {
this.dropdownMenuShow=false;
this.$emit('on-edit-chart-block', this.data.id);
},
// 删除该图表
removeChart() {
this.dropdownMenuShow=false;
this.$emit('on-remove-chart-block', this.data.id);
},
//全屏时间条件查询
dateChange(time) {
this.searchTime = [...time];
this.seriesItemScreen = [];
this.serieSingleStat = "";
this.startLoading('screen');
this.$emit('on-search-data', this.data.id, this.searchTime);
},
clickos() {
this.dropdownMenuShow=false;
},
clearChart(){
this.data = {};
},
// 全屏查看
showAllScreen() {
this.dropdownMenuShow=false;
this.searchTime = [];
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
this.$refs.calendarPanel.setCustomTime(this.searchTime);
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
if(errorMsg && errorMsg!==''){
this.isError = true;
this.errorContent = errorMsg;
}else {
this.isError = false;
this.errorContent = '';
}
if(area==='showFullScreen'){//全屏按时间查询
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
if(Number(seriesItem)){
let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else {
this.serieSingleStat =seriesItem;
}
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.endLoading('screen');
}else{
//设置高度 chart-table
this.$nextTick(() => {
const chartBox = document.getElementById('chartSingleStatDiv'+this.chartIndex);
let height = chartItem.height;
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; // 展示操作按键
this.panelIdInner = panelId;
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
if(Number(seriesItem)){
let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else {
this.serieSingleStat =seriesItem;
}
if (filter) { // 保存数据,用于同步时间
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.oldSearchTime[0] = this.searchTime[0];
this.oldSearchTime[1] = this.searchTime[1];
}
this.endLoading();
}
},
},
mounted() {
this.firstLoad = false;
},
beforeDestroy() {
this.clearChart();
},
};
</script>

135
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -72,6 +72,18 @@
</div>
</template>
<template v-if="chart.type==='singleStat'">
<div id="chartSingleStatPreview" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"
style=" height:100%;display:table;text-align:center;width:calc(100% - 16px);color:#000;" >
<div class="line-area" ref="singleStatArea" id="singleStatArea" style="margin-top:0px; text-align:center;
vertical-align: middle;
display:table-cell;
font-size:30px;">
{{serieSingleStat}}
</div>
</div>
</template>
<template v-if="chart.type==='table'">
<div id="chartTablePreview" :class="{'visible':tableShow,'hidden':!tableShow}" >
<el-table id="tableContainer" style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border tooltip-effect="light" v-scrollBar:el-table >
@@ -130,6 +142,7 @@
//seriesItem: [], // 保存信息
isError:false,
errorContent:'',
serieSingleStat:'',
seriesItemScreen:[],
pageSizes:[50,100,200],
screenPageObj:{
@@ -175,89 +188,6 @@
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
titleHeight:50,
legendHeight:80,
//oldChartBoxCss:'',
/*
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]);
}
}]
},*/
};
},
computed: {
@@ -282,6 +212,8 @@
}else if(chartType==='url'){
this.urlShow = false;
chartContainerId = 'chartUrlPreview';
}else if (chartType === 'singleStat') {
chartContainerId = 'chartSingleStatPreview';
}
//设置高度 chart-table
@@ -376,6 +308,9 @@
this.setTableData([]);
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 'stackArea' || chartItem.type === 4) {
this.setData(chartItem, []);
}else if(chartItem.type ==='singleStat'){
this.serieSingleStat = "";
this.$refs.loadingPreview.endLoading();
}
});
} else {
@@ -399,6 +334,7 @@
axios.all(axiosArr).then((res) => {
if (res.length > 0) {
const series = [];
let singleStatRlt = '';
const legend = [];
const tableData = [];
const sumData = {
@@ -412,7 +348,16 @@
this.isError = false;
this.errorContent = "";
if (response.data.result) {
// console.log(response.data.result)
if(chartItem.type==='singleStat'){
if(response.data.result.length===1){
let statistics = chartItem.param.statistics;
if(response.data.result[0].values){
singleStatRlt = bus.getSingleStatRlt(statistics,response.data.result[0].values);
}
}else if(response.data.result.length > 1){
singleStatRlt = this.$t("dashboard.panel.singleStatErrorTip");
}
}else {
// 循环处理每个elements下获取的数据列
response.data.result.forEach((queryItem, resInnerPos) => {
const seriesItem = {
@@ -447,7 +392,9 @@
host += `${tag}="${queryItem.metric[tag]}",`;
}
});
if(host.endsWith(',')){host = host.substr(0,host.length-1);}
if (host.endsWith(',')) {
host = host.substr(0, host.length - 1);
}
if (queryItem.metric.__name__) {
host += "}";
}
@@ -496,6 +443,7 @@
}
});
}
}
}else{
alert('error')
this.isError = true;
@@ -515,6 +463,14 @@
if (series.length && chartItem.type === 4) {//曲线汇总
}
this.setData(chartItem, series, legend);
}else if(chartItem.type ==='singleStat'){
if(Number(singleStatRlt)){
let singleStatTmp =parseFloat(Number(singleStatRlt).toFixed(2));
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else {
this.serieSingleStat =singleStatRlt;
}
this.$refs.loadingPreview.endLoading();
}
//}
} else {
@@ -524,6 +480,9 @@
this.setTableData([]);
} else if (type === 'line' || type === 'bar' || type === 'stackArea' || type === 4) {
this.setData(chartItem, []);
}else if(chartItem.type ==='singleStat'){
this.serieSingleStat = "";
this.$refs.loadingPreview.endLoading();
}
//}
}
@@ -1031,7 +990,7 @@
iframe.src="";
}
this.isStackArea = false;
this.serieSingleStat = '';
},
// 重新请求数据 刷新操作
/*
@@ -1065,6 +1024,10 @@
this.showLegend = false;
this.$refs.loadingPreview.startLoading();
this.getQueryChart();
}else if (chartType === 'singleStat') {
this.serieSingleStat = "";
this.$refs.loadingPreview.startLoading();
this.getChartData();
}
},
// 查询数据,修改日期查询全屏数据

15
nezha-fronted/src/components/common/language/cn.js
View File

@@ -102,6 +102,7 @@ const cn = {
selectPanelTitle: "选择面板",
createPanelTitleSec: "新增面板",
editPanelTitle: "面板",
singleStatErrorTip:'Only queries that return single series/table is supported',
panelForm: {
panelName: "面板名称",
panelId: "ID"
@@ -113,6 +114,7 @@ const cn = {
chartName: "图表名称",
type: "类型",
url: "URL",
statistics:'Statistics',
typeVal: {
line: {
label: "曲线图"
@@ -128,8 +130,21 @@ const cn = {
},
url: {
label: "URL"
},
singleStat:{
label:"SingleStat"
}
},
statisticsVal:{
min:'Min',
max:'Max',
average:'Average',
total:'Total',
first:'First',
last:'Last',
range:'Range',
different:'Different',
},
width: "宽",
high: "高",
metric: "指标",

15
nezha-fronted/src/components/common/language/en.js
View File

@@ -107,6 +107,7 @@ const en = {
selectPanelTitle:'Select', //"选择面板"
createPanelTitleSec:'New panel',//"新增面板"
editPanelTitle: 'Panel', //"面板"
singleStatErrorTip:'Only queries that return single series/table is supported',
panelForm:{
panelName:'Panel name', //"面板名称"
panelId:"ID" //ID
@@ -121,6 +122,7 @@ const en = {
unit:"Unit",
url:"URL",
legend:'Legend',
statistics:'Statistics',
legendTip:'Controls the name of the time series, using name or pattern. For example {{hostname}} will be replaced with label value for the label hostname.',
typeVal:{
line:{
@@ -137,8 +139,21 @@ const en = {
},
url:{
label:"URL"
},
singleStat:{
label:"SingleStat"
}
},
statisticsVal:{
min:'Min',
max:'Max',
average:'Average',
total:'Total',
first:'First',
last:'Last',
range:'Range',
different:'Different',
},
width:'Width', //"宽"
high:'High', //"高"
metric:'Metric', //"指标"

96
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -190,7 +190,7 @@
<div v-if="!isUrl" class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
<div v-if="!isUrl" class="line-100"></div>
<el-row v-if="!isUrl" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<el-row v-if="!isUrl && !isSingleStat" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<chart-metric ref="chartTag"
:pointer="index"
:metric-list="metricList"
@@ -201,10 +201,39 @@
@sub-save-ok="subOk"
@on-add-target-success="getTarget"
></chart-metric>
</el-row>
<button v-if="!isUrl" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
<el-row v-if="isSingleStat" class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<chart-metric ref="chartTag"
:has-legend="false"
:is-single-stat="true"
:pointer="index"
:metric-list="metricList"
:metricCascaderList="metricCascaderList"
:metricAllData="metricAllData"
:count-total="elements.length"
@on-delete-target="deleteTarget"
@sub-save-ok="subOk"
@on-add-target-success="getTarget"
></chart-metric>
</el-row>
<!--
<el-form-item prop="param.statistics" v-show="isSingleStat">
<el-row :gutter="4">
<el-col :span="4">
{{$t('dashboard.panel.chartForm.statistics')}}&nbsp;
</el-col>
<el-col :span="20">
<el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown-mini" v-model="chart.param.statistics" placeholder="" size="small">
<el-option v-for="item in statisticsList" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
-->
<button v-if="!isUrl && !isSingleStat" type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
<span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
</button>
@@ -267,6 +296,7 @@
panel: ''
},
isUrl:false,
isSingleStat:false,
rules: {
title: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
@@ -295,6 +325,10 @@
{
id:'url',
name:this.$t("dashboard.panel.chartForm.typeVal.url.label")
},
{
id:'singleStat',
name:this.$t("dashboard.panel.chartForm.typeVal.singleStat.label")
}
],
elements: [1], // 指标部分 tarNum
@@ -331,6 +365,7 @@
}
this.rightBox.show = show;
this.isUrl = false;
this.isSingleStat = false;
},
clickos() {
this.esc();
@@ -560,6 +595,7 @@
panelId = this.autocompleteExist(this.panelName2);
if (panelId) {
this.panelId = panelId;
console.log('___params___',params)
this.$post('panel/' + this.panelId + '/charts', params).then(response => {
if (response.code === 200) {
this.esc();
@@ -616,6 +652,9 @@
height: this.chart.height,
type: this.chart.type,
unit:this.chart.unit,
param:{
statistics:target.statistics
}
};
//生成指标数组
@@ -779,6 +818,18 @@
//this.chartModal = true;//????控制弹出框显示和隐藏的，不需要了
this.initOpen(); // 获取metric, productId数据
},
setIsUrl(){
this.isUrl = true;
this.isSingleStat = false;
},
setIsSingleStat(){
this.isUrl = false;
this.isSingleStat = true;
},
setIsOtherChart(){
this.isSingleStat = false;
this.isUrl = false;
},
// 编辑chart时使用, set_tdata
editData(data, panelId) {
//alert('data='+JSON.stringify(data)+"=="+panelId);
@@ -799,9 +850,24 @@
this.chart.unit=data.unit;
if(this.chart.type==='url'){
this.chart.param.url = data.param.url;
this.isUrl = true;
this.setIsUrl();
this.elements = [1];
}else if(this.chart.type==='singleStat'){
this.setIsSingleStat();
this.elements = [];
bus.chartAddInfo.metricTarget = [];
data.elements.forEach((item, index) => {
this.elements.push(index);
});
this.$nextTick(() => {
const cSet = this.$refs.chartTag;
// 派发charttag数据
cSet.forEach((item, index) => {
item.setMdata(data.elements[index],data.param.statistics);
});
});
}else{
this.setIsOtherChart();
//this.getSuggestMetric();//获得指标列表
// 指标
this.elements = [];
@@ -862,9 +928,27 @@
let chartType = this.chart.type;
this.chart.param.url='';
if(chartType==='url'){
this.isUrl = true;
this.setIsUrl();
/*if(this.$refs.chartTag){
this.$refs.chartTag.forEach((item, index) => {
item.setNotSingleStat();
});
}*/
}else if(chartType==='singleStat'){
this.elements = [1];
this.setIsSingleStat();
/*if(this.$refs.chartTag){
this.$refs.chartTag.forEach((item, index) => {
item.setSingleStat();
});
}*/
}else {
this.isUrl = false;
this.setIsOtherChart();
/*if(this.$refs.chartTag){
this.$refs.chartTag.forEach((item, index) => {
item.setNotSingleStat();
});
}*/
}
},
/*panel搜索建议*/

72
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -268,6 +268,22 @@
<el-col :span="20"><el-input v-model="elementInfo.legend" type="text" size="small"></el-input></el-col>
</el-row>
</el-form-item>
<el-form-item prop="statistics" v-show="isSingleStat">
<el-row :gutter="4">
<el-col :span="4">
{{$t('dashboard.panel.chartForm.statistics')}}&nbsp;
</el-col>
<el-col :span="20">
<el-select class="right-box-row-with-btn" popper-class="chart-box-dropdown-mini" v-model="elementInfo.statistics" placeholder="" size="small">
<el-option v-for="item in statisticsList" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-col>
</el-row>
</el-form-item>
</el-form>
</template>
<script>
@@ -297,6 +313,10 @@ export default {
hasLegend:{
type:Boolean,
default:true
},
isSingleStat:{
type:Boolean,
default:false
}
},
components: {
@@ -313,8 +333,44 @@ export default {
tagList: [], // 标签列表
selectedTagList:[],//已选中的标签列表
expression:'',
legend:''
legend:'',
statistics:'last'
},
//isSingleStat:false,
statisticsList:[
{
id:"min",
name:this.$t("dashboard.panel.chartForm.statisticsVal.min")
},
{
id:"max",
name:this.$t("dashboard.panel.chartForm.statisticsVal.max")
},
{
id:"average",
name:this.$t("dashboard.panel.chartForm.statisticsVal.average")
},
{
id:"total",
name:this.$t("dashboard.panel.chartForm.statisticsVal.total")
},
{
id:"first",
name:this.$t("dashboard.panel.chartForm.statisticsVal.first")
},
{
id:"last",
name:this.$t("dashboard.panel.chartForm.statisticsVal.last")
},
{
id:"range",
name:this.$t("dashboard.panel.chartForm.statisticsVal.range")
},
{
id:"different",
name:this.$t("dashboard.panel.chartForm.statisticsVal.different")
},
],
labelValueCascaderOptions:[],//label及value改为级联后，显示用的待选label及value
labelValueCascaderVal:[],//label及value改为级联后，选择的label及value
//metricCascaderList:[],
@@ -516,6 +572,14 @@ export default {
});
});
},
setSingleStat(){
this.hasLegend = false;
this.isSingleStat = true;
},
setNotSingleStat(){
this.hasLegend = true;
this.isSingleStat = false;
},
// (最后整体保存添加的图标的时候执行)保存, chartdata点击确认后保存本身数据并返回给chartdata
saveTarget(pointer,optType) {
if (this.pointer === pointer) {
@@ -530,6 +594,7 @@ export default {
this.elementInfo.metric = this.elementInfo.metric[2];
}
this.convertLabelValueCascadeVal();//将label，value级联选择的值，转换为selectTagList里
console.log('___saveTarget___',this.elementInfo)
this.$emit('on-add-target-success', this.elementInfo, pointer,optType);
}
});
@@ -1116,10 +1181,11 @@ export default {
},
// 编辑已有图表状态时，先填充数据
setMdata(data) {
setMdata(data,statistics) {
this.setDataFlag = true;
this.target = Object.assign({}, data);
//this.pointer =
this.elementInfo.statistics = statistics;
if(this.target.type==='expert'){
this.tableShow = 2;
this.elementInfo.type = this.target.type;

45
nezha-fronted/src/libs/bus.js
View File

@@ -210,6 +210,51 @@ export default new Vue({
}
return num.toFixed(2);
},
getSingleStatRlt(statistics,result){
let dataArray = [];
if(result){
result.forEach((item)=>{
dataArray.push(item[1]);
})
}
let statisticsRlt = '';
if(dataArray.length>0){
if(statistics==='min'){//min：最小值
statisticsRlt = dataArray.reduce(function(a , b){
return b < a ? b : a;
});
}else if(statistics==='max'){// max：最大值
statisticsRlt = dataArray.reduce(function(a , b){
return b > a ? b : a;
});
}else if(statistics==='average'){// average：平均值
let sum = 0;
dataArray.forEach((item)=>{
sum =Number(sum) + Number(item);
})
statisticsRlt = sum/dataArray.length;
}else if(statistics==='total'){//total：总计
dataArray.forEach((item)=>{
statisticsRlt =Number(statisticsRlt) + Number(item);
})
}else if(statistics==='first'){//first：第一个值
statisticsRlt = dataArray[0];
}else if(statistics==='last'){// last：最后一个值
statisticsRlt = dataArray[dataArray.length-1];
}else if(statistics==='range'){//range : max - min
let min = dataArray.reduce(function(a , b){
return b < a ? b : a;
});
let max = dataArray.reduce(function(a , b){
return b > a ? b : a;
});
statisticsRlt = max-min;
}else if(statistics==='different'){//different : last - first
statisticsRlt = dataArray[dataArray.length-1]-dataArray[0];
}
}
return statisticsRlt;
},
computeTimezone:function(sourceTime){
let offset=localStorage.getItem('nz-sys-timezone');
if(offset&& offset != 'undefined' && offset != null){