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

feat：新功能

Browse Source 
1 dashboard模块：图表增加url类型（新增，预览，修改，删除，全屏，刷新），目前拖拽改变大小存在问题（prev及next相关问题）
fix：修改问题
1 webshell模块：resize时增加防抖处理了
2 explor模块：全屏不显示标题，下拉菜单只显示全屏
This commit is contained in:
hyx
2020-04-14 21:46:38 +08:00
parent 3b9c728c30
commit 764f2fb6c3
14 changed files with 1077 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -105,6 +105,16 @@
:panel-id="filter.panelId"
:chart-index="index"
:editChartId="'editChartId' + item.id"></chart-table>
<chart-url v-if="item.type === 'url'" ref="editChart" :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-url>
</div>
</draggable>
<el-row v-if="dataList.length === 0" class="noData"></el-row>
@@ -115,6 +125,7 @@ import axios from 'axios';
import bus from '../../libs/bus';
import lineChartBlock from './line-chart-block';
import chartTable from './chart-table';
import chartUrl from './chart-url';
import draggable from 'vuedraggable'
export default {
@@ -124,6 +135,7 @@ export default {
components: {
lineChartBlock,
chartTable,
chartUrl,
draggable,
},
data() {
@@ -489,6 +501,7 @@ export default {
}else {
this.dataList = this.dataTotalList;
}
console.log('0000==========',this.dataList);
this.$nextTick(() => {
if (this.dataList.length > 0 && this.$refs.editChart) {
this.$refs.editChart.forEach((item, i) => {
@@ -508,7 +521,12 @@ export default {
if(oldDataListLen){
realIndex += oldDataListLen;
}
let chartType = item.type;
if(chartType!=='url'){
this.getChartData(item, realIndex);
}else {
this.setSize(item.span, realIndex); // 设置该图表宽度
}
});
}
},

196
nezha-fronted/src/components/charts/chart-url.scss Normal file
View File

@@ -0,0 +1,196 @@
/* ---------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-url {
width: 100%;
height: 100%;//calc(100% - 40px);
// min-height: 500px;
position: relative;
background: #FFF;
border: 1px solid #d8dce1;
padding: 0px 0px;
margin-bottom: 10px;
padding-bottom: 3px;
.url-container{
padding-left: 8px;
padding-right: 8px;
}
.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: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;
/*background: $btn-light-background-color;
border-radius: 6px;;
border: 1px solid #ccc;
.set-icon {
display: inline-block;
cursor: pointer;
padding: 5px 15px;
border-right: 1px solid #ccc;
}
.set-icon:hover{
background: $btn-light-background-color-hover;
}
.set-icon:last-child{
border-right: none !important;
}
.el-icon-refresh-right{
color: #F0BF84;
}
i{
font-size: 16px;
color: #000;
}
.list-icon {
float: left;
}
.show-icon {
cursor: pointer;
float: right;
font-size: 14px;
}*/
}
.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;
}
.chart-table-col{
width: 100%;
}
.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;
}
}

374
nezha-fronted/src/components/charts/chart-url.vue Normal file
View File

@@ -0,0 +1,374 @@
<style lang="scss" scoped>
@import './chart-url.scss';
</style>
<style>
.max-width-90{
max-width: 90px;
}
</style>
<template>
<div class="chart-url" :id="'chartUrlDiv'+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-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">
<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 :id="'chartUrl'+chartIndex" class="mt-10 url-container" v-show="firstShow" >
<iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
style="z-index:5000;"
></iframe><!-- style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;" :src="chart.url" v-scrollBar:char-url-preview-->
</div>
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @opened="initDialog" @close="screenModal = false" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
</div>
<iframe :id="'urlContainerFull'+chartIndex" frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto
style="z-index:5000;"
></iframe><!-- style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;" :src="chart.url" v-scrollBar:char-url-preview-->
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
</div>
</template>
<script>
import bus from '../../libs/bus';
import chartDataFormat from './chartDataFormat'
import loading from "../common/loading";
export default {
name: 'chartUrl',
components: {
'loading': loading,
},
props: {
// 看板id
panelId: {
type: Number,
default: 0,
},
editChartId: {
type: String,
default: 'editChartId',
},
chartIndex:{
type: Number,
default: 0,
}
},
data() {
return {
data: {}, // 该图表信息,chartItem
unit:{},
images: '',
loading:Object,
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
firstLoad: false, // 是否第一次加载
screenModal: false,
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,
};
},
created() {
},
computed: {},
watch: {},
methods: {
showLoad(chartItem) {
this.data = chartItem;
console.log('=========',this.data);
this.panelIdInner = this.panelId;
//设置高度
this.$nextTick(() => {
const chartBox = document.getElementById('chartUrlDiv'+this.chartIndex);
let height = chartItem.height;
if(height<this.minHeight){
height = this.minHeight;
}
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
const urlBox = document.getElementById('urlContainer'+this.chartIndex);
urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight}px`;// -75-32
});
this.startLoading();
this.setLoadFrame();
this.divFirstShow = true;
},
setLoadFrame(){
let that = this;
this.$nextTick(() => {
let iframe = document.querySelector('#urlContainer'+this.chartIndex);
// 处理兼容行问题
if (iframe.attachEvent) {
iframe.attachEvent('onload', function () {
// iframe加载完毕以后执行操作
that.firstShow = true;
console.log('iframe已加载完毕');
that.endLoading();
})
} else {
iframe.onload = function () {
// iframe加载完毕以后执行操作
that.firstShow = true;
console.log('iframe已加载完毕');
that.endLoading();
}
}
iframe.src = that.data.param.url;
});
},
initDialog(){
this.startLoading('screen');
this.setLoadFrameFull();
},
dragResize:function(e){
console.log('========',this.data)
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),
}
console.log('========2',_this.data)
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
console.log('========3',_this.data)
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'){
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
}else {
this.$refs['localLoading'+this.chartIndex].startLoading();
}
},
endLoading(area){
if(area==='screen'){
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
}else {
this.$refs['localLoading'+this.chartIndex].endLoading();
}
},
clearData(){
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
this.startLoading();
this.firstShow = false;
let iframe = document.querySelector('#urlContainer'+this.chartIndex);
iframe.src = '';
iframe.src = this.data.param.url;
},
// 编辑图表
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);
},
clickos() {
this.dropdownMenuShow=false;
},
// 全屏查看
showAllScreen() {
this.dropdownMenuShow=false;
this.screenModal = true;
},
setLoadFrameFull(){
let that = this;
this.$nextTick(() => {
let iframe = document.querySelector('#urlContainerFull'+this.chartIndex);
// 处理兼容行问题
if (iframe.attachEvent) {
iframe.attachEvent('onload', function () {
// iframe加载完毕以后执行操作
that.firstShow = true;
console.log('iframe已加载完毕');
that.endLoading('screen');
})
} else {
iframe.onload = function () {
// iframe加载完毕以后执行操作
that.firstShow = true;
console.log('iframe已加载完毕');
that.endLoading('screen');
}
}
iframe.src = this.data.param.url;
});
},
},
mounted() {
this.firstLoad = false;
},
beforeDestroy() {},
};
</script>

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

@@ -12,6 +12,11 @@
visibility: visible;
}
</style>
<style>
.char-url-preview html{
}
</style>
<template>
<el-dialog class="chart-preview-dialog nz-dialog" id="chartPreviewDailog"
:visible.sync="screenModal"
@@ -21,7 +26,7 @@
@opened="initDialog">
<div slot="title">
<span class="nz-dialog-title">{{chart.title}}</span>
<div class="float-right panel-calendar dialog-tool">
<div class="float-right panel-calendar dialog-tool" v-if="chart.type!=='url'">
<el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
@@ -69,6 +74,14 @@
</div>
</template>
<template v-if="chart.type==='url'">
<div id="chartUrlPreview" :class="{'visible':urlShow,'hidden':!urlShow}" class="char-url-preview">
<iframe id="chartUrlFrame" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto
style="z-index:5000;"
></iframe><!-- style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;" :src="chart.url" v-scrollBar:char-url-preview-->
</div>
</template>
<loading ref="loadingPreview"></loading>
</el-dialog>
</template>
@@ -108,12 +121,6 @@
xAxis: [],
theData: [], // series数据组
},
//panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
//chartName: '',
//firstLoad: false, // 是否第一次加载
//divFirstShow:false,
//highchartStore: null, // 保存图表数据
//echartStore:null,// 保存图表数据
echartModalStore: null, // 全屏查看时数据
chartType: 'line', // 图表类型
screenModal: false,
@@ -136,6 +143,7 @@
//dropdownMenuShow:false,
showLegend:true,
tableShow:true,
urlShow:true,
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
//oldSearchTime:[],
minHeight:200,
@@ -234,25 +242,19 @@
show(chartInfo) {
this.searchTime = [new Date().setHours(new Date().getHours()-1),new Date()];
this.chart=chartInfo;
let chartType= chartInfo.type;
let chartContainerId = 'chartEchartPreview'
if(chartType==='table'){
/*
for(let i=0;i<8;i++){
this.seriesItemScreen.push({//表格数据
// label: '',//label
// metric: '',//metric列
element:'',
time: '',//采集时间
value: '',//数值
});
}*/
this.tableShow = false;
chartContainerId = 'chartTablePreview';
}else if (chartType === 'line' || chartType === 'bar' || chartType === 'stackArea' || chartType === 4) {
this.isGreyScreen=[];
this.showLegend = false;
chartContainerId = 'chartEchartPreview';
}else if(chartType==='url'){
this.urlShow = false;
chartContainerId = 'chartUrlPreview';
}
//设置高度 chart-table
@@ -275,6 +277,33 @@
this.setSize(chartInfo.span); // 设置该图表宽度
this.screenModal = true;
},
setLoadFrame(){
if(this.chart.type==='url'){
let that = this;
this.$nextTick(() => {
let iframeBox = document.querySelector('#chartUrlPreview');
let iframe = document.querySelector('#chartUrlFrame');
// 处理兼容行问题
if (iframe.attachEvent) {
iframe.attachEvent('onload', function () {
// iframe加载完毕以后执行操作
console.log('iframe已加载完毕');
that.$refs.loadingPreview.endLoading();
})
} else {
iframe.onload = function () {
// iframe加载完毕以后执行操作
console.log('iframe已加载完毕');
that.$refs.loadingPreview.endLoading();
}
}
console.log('=======',this.chart)
iframe.src = this.chart.param.url;
});
}
},
filterShowData(source,pageObj){
return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
@@ -288,10 +317,18 @@
if(this.echartModalStore){
this.echartModalStore.clear();
}
}else if(chartType==='url'){
}
//后台获得数据
if(this.chart.type!=='url'){
this.$refs.loadingPreview.startLoading();
this.getChartData();
}else {
this.$refs.loadingPreview.startLoading();
this.urlShow = true;
this.setLoadFrame();
}
},
// 设置图表的宽度
setSize(size) {
@@ -789,6 +826,12 @@
this.seriesItemScreen = [];
this.searchTime[0] = new Date().setHours(new Date().getHours()-1);
this.searchTime[1] =new Date();
let iframe = document.querySelector('#chartUrlFrame');
if(iframe){
iframe.src="";
}
},
// 重新请求数据 刷新操作
/*
@@ -955,6 +998,7 @@
},
},
mounted() {
},
beforeDestroy() {
this.clearChart();

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

@@ -61,6 +61,19 @@
}
}
}
.nz-chart-dropdown-one {
height: 36px;
li {
/*padding: 0 20px !important;*/
padding-left:15px !important;
padding-right:0px !important;
width:140px;
text-align: left;
i {
margin-right: 10px;
}
}
}
.line-chart-block {
height: 100%;
//min-height: 0px;

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

@@ -38,12 +38,12 @@
<el-dropdown-item @click.native="showAllScreen" ><i style="font-size: 16px;" class="el-icon-full-screen"></i>{{$t('dashboard.screen')}}</el-dropdown-item>
</el-dropdown-menu>
-->
<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">
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
<li v-show="!isExplore" @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">
<li v-show="!isExplore" @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">
<li v-show="!isExplore" @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>
@@ -80,8 +80,9 @@
width="90%"
@close="screenModal = false"
@opened="initDialog">
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div slot="title" >
<span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
<span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
<div class="float-right panel-calendar dialog-tool">
<el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-dashboard-picker"
format="yyyy/MM/dd HH:mm"
@@ -144,6 +145,10 @@
type: Boolean,
default: true,
},
isExplore:{
type:Boolean,
default:false,
}
},
data() {
return {

26
nezha-fronted/src/components/cli/webSSH.vue
View File

@@ -537,6 +537,29 @@
if(_this.consoleHeight===null || !_this.consoleHeight){_this.consoleHeight = _this.initConsoleHeight;}
}
},
debounce(operate, delay) {
let time = null
let timer = null
let newTime = null
function task() {
newTime = +new Date()
if(newTime - time < delay){
timer = setTimeout(task, delay)
}else {
operate()
timer = null
}
time = newTime
}
return function () {
// 更新时间戳
time = +new Date()
if(!timer){
timer = setTimeout(task, delay)
}
}
},
windowChange(){
//alert('winChange');
if(this.editableTabs&&this.editableTabs.length>0){
@@ -576,7 +599,8 @@
}
},
created() {
window.addEventListener('resize',this.windowChange);
//window.addEventListener('resize',this.windowChange);
window.addEventListener('resize',this.debounce(this.windowChange, 1000),false);
},
mounted() {

150
nezha-fronted/src/components/common/calendar.vue Normal file
View File

@@ -0,0 +1,150 @@
<style scoped lang="scss">
.loading-font{
color:#232f3e !important;
}
.calendar{
}
.nz-dashboard-dropdown-bg {
background: $global-text-color-active;
color: #fff;
}
.calendar-dropdown-title {
line-height:24px;
padding-left:5px;
margin-left:0px;
margin-top: 3px;
text-align:left;
border-radius:4px;
width:140px;
height:24px;
border:solid 1px #d8dce1;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.el-dropdown-link {
cursor: pointer;
}
.calendar-popover{
line-height:22px;
text-align:center;
}
.el-popper{
}
</style>
<template>
<div class="calendar top-tools">
<el-dropdown @command="timeChange" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown>
<el-popover
placement="bottom-end"
width="80"
trigger="hover">
<el-row :gutter="10" class="calendar-popover">
<el-col :span="24">{{searchTime[0]}}</el-col>
</el-row>
<el-row :gutter="10" class="calendar-popover">
<el-col :span="24">to</el-col>
</el-row>
<el-row :gutter="10" class="calendar-popover">
<el-col :span="24">{{searchTime[1]}}</el-col>
</el-row>
<el-row :gutter="10" class="el-dropdown-link" slot="reference">
<el-col :span="3" ><i class="el-icon-time"></i></el-col>
<el-col :span="16" class="panel-list-title" >{{showTime.text}}</el-col>
<el-col :span="5" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
</el-row>
</el-popover>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
<el-dropdown-item>{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item>
<el-dropdown-item v-for="item in timeData" :key="item.id+1"
:class="showTime.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">
{{item.text}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</template>
<script>
import bus from '../../libs/bus';
export default {
name: "calendar",
props: {
},
data() {
return {
searchTime:[
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 15),'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
],
showTime: {
id: 1,
text: this.$t("dashboard.panel.lastFiveMin"),
},
timeData: [
{
id:1,
text:this.$t("dashboard.panel.lastFiveMin"),
},
{
id:2,
text:this.$t("dashboard.panel.lastFifteenMin"),
},
{
id:3,
text:this.$t("dashboard.panel.lastThirtyMin"),
},
{
id:4,
text:this.$t("dashboard.panel.lastOneHour"),
},
{
id:5,
text:this.$t("dashboard.panel.lastThreeHour"),
},
{
id:6,
text:this.$t("dashboard.panel.lastSixHour"),
},
{
id:7,
text:this.$t("dashboard.panel.lastTwelveHour"),
},
{
id:8,
text:this.$t("dashboard.panel.lastTwentyFourHour"),
},
{
id:9,
text:this.$t("dashboard.panel.lastTwoDay"),
},
{
id:10,
text:this.$t("dashboard.panel.lastSevenDay"),
},
{
id:11,
text:this.$t("dashboard.panel.lastThirtyDay"),
}
],
};
},
methods: {
timeChange(val) {
if (!val) {
//this.toAdd();
return false;
}
this.showTime = val;
//this.showPanel = val
//this.filter.panelId = this.showPanel.id;
//this.$emit('on-remove-chart-block', this.searchTime);
},
}
};
</script>

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

@@ -82,6 +82,7 @@ const cn = {
chartId:"ID",
chartName:"图表名称",
type:"类型",
url:"Url",
typeVal:{
line:{
label:"曲线图"
@@ -91,7 +92,13 @@ const cn = {
},
table:{
label:"表格"
}
},
stackArea:{
label:"面积图"
},
url:{
label:"Url"
},
},
width:"宽",
high:"高",
@@ -115,6 +122,18 @@ const cn = {
recOneMonth:'最近1月',
curMonth:'本月',
lastMonth:'上月',
customTimeRange:'Custom time range',
lastFiveMin:'最近5分钟',
lastFifteenMin:'最近15分钟',
lastThirtyMin:'最近30分钟',
lastOneHour:'最近1小时',
lastThreeHour:'最近3小时',
lastSixHour:'最近6小时',
lastTwelveHour:'最近12小时',
lastTwentyFourHour:'最近24小时',
lastTwo:'最近2天',
lastSevenDay:'最近7天',
lastThirtyDay:'最近30天',
refreshInterval:{
never:'从不',
oneMinute:'1分钟',

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

@@ -71,8 +71,7 @@ const en = {
failedDetail:'Failed Detail'
},
reset:'Reset',
submit:'Submit',
noData:'No data',
submit:'Submit'
},
pageSize: '/page',
webshell:{
@@ -117,6 +116,7 @@ const en = {
chartName:"Chart Name",
type:"Type",
unit:"Unit",
url:"Url",
legend:'Legend',
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:{
@@ -131,6 +131,9 @@ const en = {
},
stackArea:{
label:"Stack Area"
},
url:{
label:"Url"
}
},
width:'Width', //"宽"
@@ -157,6 +160,18 @@ const en = {
recOneMonth:'Last 1 month',//'最近1月'
curMonth:'This month',//'本月'
lastMonth:'Last month',//'上月'
customTimeRange:'Custom time range',
lastFiveMin:'Last 5 minutes',
lastFifteenMin:'Last 15 minutes',
lastThirtyMin:'Last 30 minutes',
lastOneHour:'Last 1 hour',
lastThreeHour:'Last 3 hours',
lastSixHour:'Last 6 hours',
lastTwelveHour:'Last 12 hours',
lastTwentyFourHour:'Last 24 hours',
lastTwoDay:'Last 2 days',
lastSevenDay:'Last 7 days',
lastThirtyDay:'Last 30 days',
refreshInterval:{
never:'Never', //'从不'
oneMinute:'1 minute', // 1 minute
@@ -284,7 +299,6 @@ const en = {
assetConfirmDelete: 'Related endpoints and alerts will be removed, are you sure you want to delete this asset?',//Related endpoints and alerts will be removed, are you sure you want to delete this asset?
yes: 'Yes', //"是"
no: "No",//No
success: "Success",
deleteSuccess: 'Delete success',//"删除成功"
saveSuccess: 'Save success', //"保存成功"
coverSuccess: 'Override success',//'覆盖成功'
@@ -574,12 +588,8 @@ const en = {
username: 'User',
operation: 'Operation',
type: 'Type',
createDate: 'Date',
ip: "IP",
userId: "UserId",
operaId: "OperaId",
time: "time(ms)",
params: "Params"
createDate: 'CreateDate',
ip: "IP"
},
mib:{
mib:'SNMP mib',
@@ -591,12 +601,11 @@ const en = {
models:'Models',
modelTip:'please select models',
createMib:'Create Mib',
mibFiles:'Mib Files',
mibFile:'Mib File',
uploadTip:'please upload mib file',
requiredMibFile:'mib file is required',
vendor:'Vendor',
type:'Type',
mibBrowser: 'Mib browser',
},
system:{
system:'System',

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

@@ -120,7 +120,7 @@
<el-col :span="10" style="margin-left:-7px;">
<div class="grid-content ">
<el-form-item prop="type">
<el-select class="right-box-row-with-btn" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
<el-select class="right-box-row-with-btn" @change="chartTypeChange" value-key="chartType" popper-class="chart-box-dropdown-mini" v-model="chart.type" placeholder="" size="mini">
<el-option v-for="item in chartTypeList" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
@@ -128,10 +128,10 @@
</el-form-item>
</div>
</el-col>
<el-col :span="2" style="margin-left: 7px">
<el-col v-show="!isUrl" :span="2" style="margin-left: 7px">
<div class="label-center" >{{$t('dashboard.panel.chartForm.unit')}}</div>
</el-col>
<el-col :span="10">
<el-col v-show="!isUrl" :span="10">
<el-cascader filterable placeholder="" popper-class="dc-dropdown" size="mini"
:options="unitOptions"
:props="{ expandTrigger: 'hover' }"
@@ -183,10 +183,14 @@
</el-col>
</el-row>
<div class="right-box-sub-title">{{$t('dashboard.panel.chartForm.metric')}}</div>
<div class="line-100"></div>
<el-form-item v-if="isUrl" :label='$t("dashboard.panel.chartForm.url")' prop="param.url" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur' }">
<el-input size="small" maxlength="64" show-word-limit v-model="chart.param.url"></el-input>
</el-form-item>
<el-row class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<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">
<chart-metric ref="chartTag"
:pointer="index"
:metric-list="metricList"
@@ -200,7 +204,7 @@
</el-row>
<button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-light" style="margin-left: 1px;">
<button v-if="!isUrl" 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>
@@ -250,6 +254,9 @@
span:12,
height:'400',
unit:2,
param:{
url:''
},
elements:{
id: '',
expression: '',
@@ -258,9 +265,13 @@
},
panel: ''
},
isUrl:false,
rules: {
title: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
],
url: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
]
},
chartTypeList: [
@@ -279,6 +290,10 @@
{
id:'stackArea',
name:this.$t("dashboard.panel.chartForm.typeVal.stackArea.label")
},
{
id:'url',
name:this.$t("dashboard.panel.chartForm.typeVal.url.label")
}
],
elements: [1], // 指标部分 tarNum
@@ -311,6 +326,7 @@
methods: {
show(show) {
this.rightBox.show = show;
this.isUrl = false;
},
clickos() {
this.esc();
@@ -452,12 +468,12 @@
if (this.subCount === this.elements.length) {
this.subCount = 0;
// 保存完成,进行删除操作
console.log('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
console.log('box第二步，删除之前，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
//('box第二步，deleteIndex='+this.deleteIndex+'=开始删除一个元素')
//console.log('box第二步，删除之前，elements='+JSON.stringify(this.elements)+' elementTarget='+JSON.stringify(this.elementTarget)+' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.elements.splice(this.deleteIndex, 1);
this.elementTarget.splice(this.deleteIndex, 1);//没有作用，此处是[]
bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
console.log('box第二步，删除完毕，elements='+JSON.stringify(this.elements),' elementTarget='+JSON.stringify(this.elementTarget),' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
//console.log('box第二步，删除完毕，elements='+JSON.stringify(this.elements),' elementTarget='+JSON.stringify(this.elementTarget),' bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
this.$nextTick(() => {
this.$refs.chartTag.forEach((item, index) => {
@@ -522,7 +538,12 @@
this.$emit("reloadOnlyPanel");
this.$store.commit('panelListChange', true);
} else {
if(response.msg){
this.$message.error(response.msg);
}else {
this.$message.error(response);
}
}
});
}
@@ -541,7 +562,11 @@
let panel = this.panelData.find(p => p.id === this.panelId);
this.$emit('on-create-success', 'create', response.data,params, panel);
} else {
if(response.msg){
this.$message.error(response.msg);
}else {
this.$message.error(response);
}
}
});
clearInterval(interval);
@@ -555,7 +580,6 @@
},
// 更新图表
updateCharts(params) {
console.log('))))))))))))=',params)
this.$put('panel/' + this.panelId + '/charts', params).then(response2 => {
if (response2.code === 200) {
this.esc();
@@ -564,7 +588,11 @@
this.panelName2 = '';
this.$emit('on-create-success', 'update', response2.data, params);
} else {
if(response2.msg){
this.$message.error(response2.msg);
}else {
this.$message.error(response2);
}
}
});
},
@@ -626,19 +654,41 @@
},
confirmAdd() {
this.elementTarget = []; // 初始化清空参数
if(this.chart.type!=='url'){
this.$refs.chartTag.forEach((item, index) => {//循环指标列表
// 触发每个tag组件内部进行校验
item.saveTarget(index);
});
this.$refs.chartForm.validate();
}else {
this.$refs.chartForm.validate((valid) => {
const params = {
title: this.chart.title,//this.chart
span: this.chart.span,
height: this.chart.height,
type: this.chart.type,
unit:this.chart.unit,
param:{
url:this.chart.param.url,
}
};
if (valid) {
params.elements = [];
if (this.isedit) {
params.id = this.chart.id;
this.updateCharts(params);
} else {
this.addCharts(params);
}
}
});
}
},
// 获取metric列表
getSuggestMetric() {
//this.$get('/prom/api/v1/label/__name__/values').then(response => {
this.$get('/module?pageSize=-1').then(response => {
console.log('---response---',response);
if (response.code === 200) {
console.log('---response200---',response);
this.metricList = response.data.list;
const cascaderMap = new Map();
this.metricList.forEach((item,index) => {
@@ -682,7 +732,6 @@
});
this.metricCascaderList = metricCascaderArr;
console.log('---response200metricCascaderList---',this.metricCascaderList);
}else {
this.metricList = [];
this.metricCascaderList = [];
@@ -714,7 +763,6 @@
} else {
this.$nextTick(() => {
console.log('1_+_+_+_+_+_+',JSON.stringify(elementInfo.elements[0]));
this.$refs.chartTag[0].setMdata(elementInfo.elements[0]);
});
}
@@ -742,6 +790,11 @@
this.chart.height = data.height+'';
this.chart.type = data.type;
this.chart.unit=data.unit;
if(this.chart.type==='url'){
this.chart.param.url = data.param.url;
this.isUrl = true;
this.elements = [1];
}else{
//this.getSuggestMetric();//获得指标列表
// 指标
this.elements = [];
@@ -756,6 +809,7 @@
item.setMdata(data.elements[index]);
});
});
}
},
// 初始化信息
@@ -797,7 +851,15 @@
unitSelected:function(value){
this.chart.unit=value[value.length-1];
},
chartTypeChange(){
let chartType = this.chart.type;
this.chart.param.url='';
if(chartType==='url'){
this.isUrl = true;
}else {
this.isUrl = false;
}
},
/*panel搜索建议*/
panelSuggestion(queryString, callback) {
let data = [];
@@ -818,11 +880,41 @@
preview(){
//验证图表数据是否合法？？，合法了再显示预览窗口
this.elementTarget = []; // 初始化清空参数
if(this.chart.type!=='url'){
this.$refs.chartTag.forEach((item, index) => {//循环指标列表
// 触发每个tag组件内部进行校验
item.saveTarget(index,'preview');
});
this.$refs.chartForm.validate();
}else {
this.$refs.chartForm.validate((valid) => {
const params = {
title: this.chart.title,//this.chart
span: this.chart.span,
height: this.chart.height,
type: this.chart.type,
unit:this.chart.unit,
param:{
url:this.chart.param.url,
}
};
if (valid) {
if (this.isedit) {
params.id = this.chart.id;
}
this.$refs.chartsPreview.show(params);
/*
if (this.isedit) {
params.id = this.chart.id;
this.updateCharts(params);
} else {
this.addCharts(params);
}
*/
}
});
}
//this.$refs.chartForm.validate();
},
//preview--end
@@ -854,6 +946,7 @@
item.clearSelectedTagList();
});
}
this.isUrl = false;
},
}
</script>

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

@@ -343,7 +343,6 @@ export default {
let module = node.data.label;
let metricArr = [];
let metricArrTmp = [];
console.log('success=3',project,module,_this.metricCascaderList);
let metricLabelValMap = new Map();
let projectItem = _this.metricAllData.get(project);
@@ -363,10 +362,8 @@ export default {
};
metricArr.push(childOption);
});
console.log('success=111',metricArr);
resolve(metricArr);
}else {
console.log('success=222');
_this.metricCascaderList.map((item, index) => {
if(item.label===project){//选择的project
item.children.map((innerItem, innerIndex) => {
@@ -375,7 +372,6 @@ export default {
// 当二级分类的的child为空时才请求一次数据
let match = '{project="'+project+'",module="'+module+'"}';
_this.$get('/prom/api/v1/series?match[]='+match).then(res => {
console.log('success=5',res)
if (res.status === 'success') {
res.data.forEach((tag, i) => {
let metricName = tag.__name__;
@@ -432,12 +428,10 @@ export default {
});
resolve(metricArr);
}else {
console.log('success=999')
resolve([]);
}
})
}else {//已经加载过了
console.log('success=78')
resolve([]);
}
}
@@ -474,11 +468,11 @@ export default {
},
// 第三步,将数据重新赋值,sub-save-ok回调
setSubdata(index) {
console.log('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
console.log('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
//('metric第三步，bus='+JSON.stringify(bus.chartAddInfo.metricTarget));
//console.log('metric第三步，bus('+this.pointer+')='+JSON.stringify(bus.chartAddInfo.metricTarget[this.pointer]));
this.elementInfo = bus.chartAddInfo.metricTarget[this.pointer];
console.log('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
console.log('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
//console.log('metric第三步，index'+index+',如果index是当前pointer('+this.pointer+')，则继续，把bus中的值赋值给当前metric')
//console.log('metric第三步，elementInfo='+JSON.stringify(this.elementInfo));
if(this.elementInfo.type==='expert'){
//alert('metric第三步，expert');
// 当该项expression为空时，重置一下
@@ -497,36 +491,29 @@ export default {
}
},
clearSelectedTagList(){
console.log('--------clear selected')
this.elementInfo.selectedTagList.forEach((selectItem)=>{
selectItem.value = [];//清空值，再进行赋值
});
},
convertLabelValueCascadeVal(){
//把级联选择label及value，转换为selectedTagList里的value？？？？？？
//把级联选择label及value，转换为selectedTagList里的value
this.clearSelectedTagList();
console.log('*** this.labelValueCascaderVal***',JSON.stringify(this.labelValueCascaderVal))
this.labelValueCascaderVal.forEach((item)=>{//[label,value]
let casLabel = item[0];
let casValue = item[1];
console.log('*** this.elementInfo.selectedTagList***',JSON.stringify(this.elementInfo.selectedTagList))
this.elementInfo.selectedTagList.forEach((selectItem)=>{
let selectLabel = selectItem.name;
let selectValue = selectItem.value;
console.log('111',selectLabel,casLabel)
if(selectLabel===casLabel){
console.log('222',selectValue.indexOf(casValue),selectValue,casValue)
if(selectValue.indexOf(casValue)===-1){
selectValue.push(casValue);
}
}
});
console.log('*** this.elementInfo.selectedTagList***end',JSON.stringify(this.elementInfo.selectedTagList))
});
},
// (最后整体保存添加的图标的时候执行)保存, chartdata点击确认后保存本身数据并返回给chartdata
saveTarget(pointer,optType) {
console.log(this.pointer,pointer,'this.labelValueCascaderVal=====',JSON.stringify(this.labelValueCascaderVal));
if (this.pointer === pointer) {
this.$refs.elementInfo.validate((valid) => {
if (valid) {//根据设置的rules进行验证，验证通过，则返回，继续进行保存（每个el-form-item都需要验证）
@@ -536,7 +523,6 @@ export default {
if(this.elementInfo.type==='normal' && this.elementInfo.metric instanceof Array){
this.elementInfo.metric = this.elementInfo.metric[2];
}
console.log('+++++++',JSON.stringify(this.labelValueCascaderVal));
this.convertLabelValueCascadeVal();//将label，value级联选择的值，转换为selectTagList里
this.$emit('on-add-target-success', this.elementInfo, pointer,optType);
}
@@ -785,7 +771,6 @@ export default {
}
this.labelValueCascaderOptions.push(labelOption);
console.log('++++item.val.length',item.value);
if(item.value.length>0){
item.value.forEach((valueItem)=>{
let labelVal = [];
@@ -795,8 +780,6 @@ export default {
});
}
});
console.log('++++val',this.labelValueCascaderVal);
console.log('++++22',this.labelValueCascaderOptions);
},
changeTag(){
this.$emit('on-change-condition');
@@ -806,7 +789,6 @@ export default {
},
// 选择metric
selectMetric() {
console.log('---setMetricToLabelValue---start')
if (this.elementInfo.metric) {//选择了metric，则设置tagList，否则设置为空
this.getSuggestTags(this.elementInfo.metric);
this.setLabelValueCascader();
@@ -858,14 +840,12 @@ export default {
},
// 获取tags列表
getSuggestTags(metricArr) {
console.log('---getSuggestTags---start',this.metricLabelValInfo)
let metric = metricArr[2];
let proTmp = metricArr[0];
let project = proTmp.substring(0, proTmp.length - 4);
let module = metricArr[1];
this.elementInfo.selectedTagList = [];
if(this.metricLabelValInfo.has(metric)){
console.log('---metricLabelValInfo--has---start')
let tagListTmp = [];
tagListTmp = [...this.metricLabelValInfo.get(metric)];
tagListTmp.forEach((selectItem)=>{
@@ -988,7 +968,6 @@ export default {
});
//排序label顺序
this.sortLabel(tagListTmp,this.elementInfo.selectedTagList);
console.log('11111111111111');
this.setLabelValueCascader();
}
}else {
@@ -1062,7 +1041,6 @@ export default {
});
this.elementInfo.selectedTagList = [];
console.log('---response---start',this.metricLabelValInfo)
if(this.metricLabelValInfo.has(metric)){
let tagListTmp = [];
tagListTmp = [...this.metricLabelValInfo.get(metric)];//[...this.metricList],
@@ -1133,7 +1111,6 @@ export default {
// 编辑已有图表状态时，先填充数据
setMdata(data) {
console.log('-------data******',JSON.stringify(data))
this.setDataFlag = true;
this.target = Object.assign({}, data);
//this.pointer =
@@ -1344,7 +1321,6 @@ export default {
bus.$on('clear_history', () => {
this.clearHistory();
});
console.log('@#$%%',this.metricCascaderList);
//this.metricCascaderList = [...this.metricCascaderListTmp];
},
beforeDestroy() {

5
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -35,8 +35,8 @@
<el-col :span="10" >
<metric-set :panelData="panelData" ref="metricSet" @on-view-chart="getChartParam" @reloadPanel="getPanelData"></metric-set>
</el-col>
<el-col :span="0.5"><div>&nbsp;</div></el-col>
<el-col :span="13" class="chart-preview-area">
<el-col :span="0.5" ><div>&nbsp;</div></el-col>
<el-col :span="13" class="chart-preview-area" >
<el-date-picker size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
@@ -53,6 +53,7 @@
<div class="chartBox">
<line-chart-block
:show-setting="false"
:isExplore="true"
ref="editChartSingle"
@on-refresh-data="refreshChart"
@on-remove-chart-block="removeChart"

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

@@ -46,10 +46,13 @@
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')" align="right">
</el-date-picker>
<!--
<calendar ref="calendarPanel" class="nz-dashboard-picker"></calendar>
-->
</div>
</div>
<div class="nz-btn-group nz-btn-group-size-small nz-btn-group-light margin-r-20">
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button"
class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="Refresh()">
<i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>
@@ -98,6 +101,7 @@
import ChartBox from "./chartBox";
import ChartList from '../../charts/chart-list';
import bus from '../../../libs/bus';
//import calendar from '../../common/calendar'
export default {
name: "panel",
@@ -267,7 +271,8 @@
},
components: {
'chart-box': ChartBox,
'chart-list': ChartList
'chart-list': ChartList,
//'calendar':calendar
},
methods: {
//刷新