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

Merge remote-tracking branch 'origin/codeCheck' into codeCheck

Browse Source 
# Conflicts:
#	nezha-fronted/src/components/charts/chart-list.vue
This commit is contained in:
chenjinsong
2020-05-29 21:10:40 +08:00
parent b5eecd5926 443cdc5f94
commit 7de9cdb6be
8 changed files with 108 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
}
</style>
<template>
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" :style="{'border':isPreview?'unset':'1px solid #d8dce1','height':isPreview?'92%':'100%'}">
<loading :ref="'localLoading'+chartIndex"></loading>
<!--
<div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
@@ -30,7 +30,7 @@
<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 trigger="click" v-show="!isPreview&&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>
@@ -51,9 +51,9 @@
</el-dropdown>
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow">
<div class="mt-10 table-container" v-cloak v-show="firstShow || isPreview">
<transition name="el-zoom-in-bottom">
<div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0" style="top:10px">
<div class="el-popover alert-clean-pop" @click="toDeleteMessage(false)" v-if="deleteBox.ids.length > 0" :style="{'top':isPreview?'-30px':'10px'}">
<i style="cursor: pointer" class="el-icon-delete"></i>
</div>
</transition>
@@ -133,7 +133,7 @@
<template v-else>-</template>
</template>
</el-table-column>
<el-table-column width="28" :resizable="false">
<el-table-column width="28" :resizable="false" v-if="!isPreview">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear" >
<i class="nz-icon nz-icon-gear"></i>
@@ -268,6 +268,7 @@
:title="$t('overall.detail')"
:visible.sync="graphShow"
width="90%"
:append-to-body="true"
id="viewGraphDialog"
@close="dialogClose">
<div slot="title">
@@ -278,7 +279,7 @@
</div>
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
<span class="vue-resizable-handle" @mousedown="dragResize" v-if="!isPreview"></span>
<element-set
path="/alertList"
:table-title="tableTitle"
@@ -457,6 +458,7 @@ export default {
chartDatas: [],
chartUnit:5,
deleteBox: {show: false, ids: "", remark: '', state: 2},
isPreview:false,
};
},
created() {
@@ -633,7 +635,8 @@ export default {
})
}
},
getAlertList: function (filterType) {
getAlertList: function (filterType,isPreview=false) {
this.isPreview = isPreview;
let queryParam={
pageSize:this.pageObj.pageSize,
pageNo:this.pageObj.pageNo,
@@ -1042,64 +1045,7 @@ export default {
},
// 设置数据, 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);
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
// this.seriesItemScreen = seriesItem;
this.storedScreanTableData=seriesItem;
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
this.screenPageObj.total=this.storedScreanTableData.length;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj);
this.endLoading('screen');
}else{
//设置高度 chart-table
this.$nextTick(() => {
const chartBox = document.getElementById('chartTableDiv'+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 tableBox = document.getElementById('tableContainer'+this.chartIndex);
tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
});
this.divFirstShow = true;
this.firstShow = true; // 展示操作按键
this.panelIdInner = panelId;
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
// this.seriesItem = seriesItem;
// this.seriesItemScreen = seriesItem;
this.storedTableData =seriesItem;
this.storedScreanTableData=seriesItem;
this.storedTableData=Object.assign([],this.storedTableData.reverse());
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
this.pageObj.total=this.storedTableData.length;
this.screenPageObj.total=this.storedScreanTableData.length;
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj);
this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
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();
//this.showTable = true;
//this.tableLoading = false;
}
},
},

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

@@ -1192,9 +1192,13 @@
this.currentRecordNum = this.currentRecordNum+1;
let chartData = this.chartDataCacheGroup.get(chart.id);
console.log("__chartItem00__",JSON.stringify(chartData))
let duplicateChartData = JSON.parse(JSON.stringify(chartData));
// console.log("__chartItem00__",JSON.stringify(chartData))
let duplicateChartData ={};
try{
duplicateChartData = JSON.parse(JSON.stringify(chartData));
}catch (e) {
console.warn(e);
}
duplicateChartData.chartItem = duplicateChart;
this.chartDataCacheGroup.set(duplicateChartId,duplicateChartData);
this.$nextTick(() => {

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

@@ -192,4 +192,15 @@
border-top: 1px solid #dfe7f2;
margin-top:-25px;
}
.center-content{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100px;
margin: auto;
text-align: center;
}
}

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

@@ -34,19 +34,24 @@
</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
<iframe :id="'urlContainer'+chartIndex" frameborder="0" width="100%" height="100%" name="showHere" scrolling=auto v-if="!showStatic"
style="z-index:5000;padding-bottom:6px;"
></iframe><!-- style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;" :src="chart.url" v-scrollBar:char-url-preview-->
</div>
<div style="position: relative;width: 100%;height: 100%;" v-if="showStatic">
<div :id="'staticContainer'+chartIndex" class="center-content"></div>
</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
<iframe :id="'urlContainerFull'+chartIndex" frameborder="0" width="100%" height="100%" name="showHereFull" scrolling=auto v-if="!showStatic"
style="z-index:5000;padding-bottom:6px;"
></iframe><!-- style=" position: absolute; width: 100%; height: 100%; top: 0;left:0;" :src="chart.url" v-scrollBar:char-url-preview-->
<div style="position: relative;width: 100%;height: 100%;" v-if="showStatic">
<div :id="'staticContainerFull'+chartIndex" class="center-content"></div>
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
@@ -97,6 +102,7 @@ export default {
titleHeight:38,//title-height:28,magrin-bottom:10
paddingBottom:6,
divFirstShow:false,
showStatic:false,
};
},
created() {
@@ -105,6 +111,7 @@ export default {
watch: {},
methods: {
showLoad(chartItem) {
console.log(chartItem)
this.data = chartItem;
this.panelIdInner = this.panelId;
//设置高度
@@ -119,14 +126,29 @@ export default {
urlBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.paddingBottom}px`;// -75-32
});
this.startLoading();
if(/\{\{.*?\}\}/g.test(this.data.param.url)){
this.showStatic=true;
this.setStaticContent();
}else{
this.showStatic=false;
this.setLoadFrame();
}
this.divFirstShow = true;
},
setStaticContent:function(){
let that = this;
this.$nextTick(() => {
let staticDiv = document.querySelector('#staticContainer'+this.chartIndex);
staticDiv.innerHTML=`<div class="content-static-url">${that.data.param.url}</div><div class="content-static-tip">${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</div>`
that.firstShow = true;
that.endLoading();
});
},
setLoadFrame(){
let that = this;
this.$nextTick(() => {
let iframe = document.querySelector('#urlContainer'+this.chartIndex);
// 处理兼容行问题
if (iframe.attachEvent) {
iframe.attachEvent('onload', function () {
@@ -143,14 +165,19 @@ export default {
that.endLoading();
}
}
iframe.src = that.data.param.url;
});
},
initDialog(){
this.startLoading('screen');
if(/\{\{.*?\}\}/g.test(this.data.param.url)){
this.showStatic=true;
this.setStaticContentFull();
}else{
this.showStatic=false;
this.setLoadFrameFull();
}
},
dragResize:function(e){
var diffWidth =20; //界面的宽度空白的地方的宽度
@@ -389,6 +416,15 @@ export default {
iframe.src = this.data.param.url;
});
},
setStaticContentFull:function(){
let that = this;
this.$nextTick(() => {
let staticDiv = document.querySelector('#staticContainerFull'+this.chartIndex);
staticDiv.innerHTML=`<span>${that.data.param.url}</span><span>${that.$t('dashboard.panel.chartForm.typeVal.url.staticTip')}</span>`
that.firstShow = true;
that.endLoading('screen');
});
},
},
mounted() {
this.firstLoad = false;
@@ -398,3 +434,13 @@ export default {
},
};
</script>
<style>
.center-content .content-static-url{
font-weight: bold;
font-size: 24px;
}
.center-content .content-static-tip{
font-size: 18px;
color: lightgrey;
}
</style>

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

@@ -128,6 +128,10 @@
</div>
</template>
<template v-if="chart.type === 'alertList'">
<chart-alert-list ref="alertListChart"></chart-alert-list>
</template>
<loading ref="loadingPreview"></loading>
</el-dialog>
</template>
@@ -139,12 +143,14 @@
import chartDataFormat from './chartDataFormat'
import {randomcolor} from '../common/js/radomcolor/randomcolor.js'
import timePicker from '../common/timePicker'
import chartAlertList from './chart-alert-list'
export default {
name: 'chartPreview',
components: {
'loading': loading,
'time-picker':timePicker
'time-picker':timePicker,
'chart-alert-list':chartAlertList,
},
props: {
panelId:Number,
@@ -320,9 +326,17 @@
this.dailogWidth = `${containerWidth*(size / 12)}px`;
});
},
getAlertListChartData:function(chartInfo,filterType){
this.$refs.alertListChart.getAlertList(filterType,true);
this.$refs.loadingPreview.endLoading();
},
// 获取一个图表具体数据
getChartData() {
const chartItem = this.chart;
if(chartItem.type === 'alertList'){
this.getAlertListChartData(chartItem,null);
return;
}
const len = chartItem.elements.length;
// 没有数据的设置提示信息暂无数据-针对每一个图
if (len === 0) {

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

@@ -131,7 +131,8 @@ const cn = {
label: "面积图"
},
url: {
label: "URL"
label: "URL",
staticTip:'双大括号中的内容将会在asset页面被替换',
},
singleStat:{
label:"SingleStat"

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

@@ -142,7 +142,8 @@ const en = {
label:"Stack Area"
},
url:{
label:"URL"
label:"URL",
staticTip:'The content in the double curly braces will be replaced on the Asset page',
},
singleStat:{
label:"SingleStat"

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

@@ -949,6 +949,8 @@
}else{
if((this.chart.type==='line'||this.chart.type==='bar'||this.chart.type==='stackArea')&&data.param){
this.chart.param.threshold=data.param.threshold;
}else{
this.chart.param.threshold='';
}
this.setIsOtherChart();
//this.getSuggestMetric();//获得指标列表
@@ -982,6 +984,8 @@
this.chart.span = 12;
this.chart.height = 400+'';
this.chart.unit=2;
this.chart.param.url='';
this.chart.param.threshold='';
this.elements = [1];
this.elementTarget = [];
bus.chartAddInfo.metricTarget = [];