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

feat:alertmessage 新增endpoint悬浮框，table类型图表新增value mapping

Browse Source
This commit is contained in:
wangwenrui
2020-11-17 10:00:39 +08:00
parent c4672ad61e
commit 02fc3e021a
8 changed files with 509 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,11 +1,12 @@
<style lang="scss">
@import './chart.scss';
@import './chart.scss';
</style>
<template>
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-table" ref="resizeBox">
<div class="chart-table" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<div class="chart-table" :id="'chartTableDiv'+chartIndex" @mouseenter="caretShow=true"
@mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
@@ -14,7 +15,7 @@
placement="top-start"
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<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>
@@ -24,60 +25,83 @@
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
<span class="chart-title-icon"><i class="nz-icon nz-icon-xialaxuanze "
: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;" >
<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>
<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>
<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="nz-icon nz-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<i class="nz-icon nz-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>
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}
</li>
<li @click="duplicate" class="el-dropdown-menu__item">
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}
</li>
</ul>
</el-dropdown>
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight" :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table @sort-change="tableDataSort">
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="tableHeight"
:data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table
@sort-change="tableDataSort">
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true"
:label="$t('dashboard.panel.chartTableColumn.element')" min-width="260"
:sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope">
{{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
</template>
</el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope">
{{ unit.compute(scope.row.value,null,2)}}
{{ scope.row.value}}
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="pageObj" @pageNo='pageNo' :post-page-sizes="pageSizes" @pageSize='pageSize' ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
<Pagination :pageObj="pageObj" @pageNo='pageNo' :post-page-sizes="pageSizes" @pageSize='pageSize'
ref="Pagination" :append-to-body="false" pop-class="out-popper-fix"></Pagination>
</div>
<!--全屏-->
<el-dialog class="nz-dialog table-chart-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenModal = false" >
<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>
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"
@change="dateChange"></time-picker>
</div>
</div>
<el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" :sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="420" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
tooltip-effect="light" v-scrollBar:el-table @sort-change="tableDataSortScreen">
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100"
:sort-orders="['ascending', 'descending']" :sortable="'custom'"></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true"
:label="$t('dashboard.panel.chartTableColumn.element')" min-width="420"
:sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope">
{{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
</template>
</el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90" :resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" min-width="90"
:resizable="false" :sort-orders="['ascending', 'descending']" :sortable="'custom'">
<template slot-scope="scope">
{{ unit.compute(scope.row.value,null,2)}}
{{ scope.row.value}}
</template>
</el-table-column>
</el-table>
<Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" :popper-append-to-body="false"></Pagination>
<Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo'
@pageSize='screenPageSize' ref="Pagination" :popper-append-to-body="false"></Pagination>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
@@ -87,17 +111,17 @@
</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'
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 {
export default {
name: 'chartTable',
components: {
'loading': loading,
'time-picker':timePicker
'time-picker': timePicker
},
props: {
chartData: {
@@ -112,7 +136,7 @@ export default {
type: String,
default: 'editChartId',
},
chartIndex:{
chartIndex: {
type: Number,
default: 0,
}
@@ -121,30 +145,30 @@ export default {
return {
tableHeight: 0,
data: {}, // 该图表信息,chartItem
unit:{},
isError:false,
errorContent:'',
pageSizes:[50,100,200],
unit: {},
isError: false,
errorContent: '',
pageSizes: [50, 100, 200],
pageObj: {
pageNo: 1,
pageSize: 50,
total: 0
},
screenPageObj:{
screenPageObj: {
pageNo: 1,
pageSize: 50,
total: 0
},
storedTableDataOld:[],//原始信息
storedTableDataScreenOld:[],//全屏原始信息
storedTableData:[],
storedScreanTableData:[],
storedTableDataOld: [],//原始信息
storedTableDataScreenOld: [],//全屏原始信息
storedTableData: [],
storedScreanTableData: [],
seriesItem: [], // 保存信息
seriesItemScreen:[],//全屏数据,
orderBy:null,//排序非全屏
orderByScreen:null,//排序全屏
seriesItemScreen: [],//全屏数据,
orderBy: null,//排序非全屏
orderByScreen: null,//排序全屏
images: '',
loading:Object,
loading: Object,
items: {
metric_name: [], // 每条数据列名称
xAxis: [],
@@ -161,14 +185,14 @@ export default {
},
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
firstShow: false, // 默认不显示操作按钮,
caretShow:false,
dragTitleShow:false,
dropdownMenuShow:false,
divFirstShow:false,
caretShow: false,
dragTitleShow: false,
dropdownMenuShow: false,
divFirstShow: false,
columns: [
{
title:'Element',
key:'element',
title: 'Element',
key: 'element',
sortable: true
}
, {
@@ -188,42 +212,42 @@ export default {
};
},
created() {
this.pageObj.pageSize=this.pageSizes[0];
this.screenPageObj.pageSize=this.pageSizes[0];
this.pageObj.pageSize = this.pageSizes[0];
this.screenPageObj.pageSize = this.pageSizes[0];
},
computed: {},
watch: {},
methods: {
pageNo(val) {
this.pageObj.pageNo = val;
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj,'series')
this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series')
},
pageSize(val) {
this.pageObj.pageSize = val;
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj,'series')
this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series')
},
filterShowData(source,pageObj,from){
let orderBy=null;
let sourceData=null;
if(from==='series'){
sourceData=this.storedTableDataOld;
orderBy=this.orderBy;
filterShowData(source, pageObj, from) {
let orderBy = null;
let sourceData = null;
if (from === 'series') {
sourceData = this.storedTableDataOld;
orderBy = this.orderBy;
}
if(from==='seriesScreen'){
sourceData=this.storedTableDataScreenOld;
orderBy=this.orderByScreen;
if (from === 'seriesScreen') {
sourceData = this.storedTableDataScreenOld;
orderBy = this.orderByScreen;
}
if(!orderBy || !orderBy.order){//没有排序 恢复默认值
source=Object.assign([],sourceData);
}else{//排序之后的顺序
if(orderBy.order==='ascending'){
source=source.sort(this.$tableSet.asce(orderBy.prop));
if (!orderBy || !orderBy.order) {//没有排序 恢复默认值
source = Object.assign([], sourceData);
} else {//排序之后的顺序
if (orderBy.order === 'ascending') {
source = source.sort(this.$tableSet.asce(orderBy.prop));
}
if(orderBy.order==='descending'){
source=source.sort(this.$tableSet.desc(orderBy.prop));
if (orderBy.order === 'descending') {
source = source.sort(this.$tableSet.desc(orderBy.prop));
}
}
return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
return source.slice((pageObj.pageNo - 1) * pageObj.pageSize, pageObj.pageNo * pageObj.pageSize)
},
startResize(e) {
@@ -232,30 +256,30 @@ export default {
},
screenPageNo(val) {
this.screenPageObj.pageNo = val;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj,'seriesScreen')
this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
},
screenPageSize(val) {
this.screenPageObj.pageSize = val;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj,'seriesScreen')
this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
},
startLoading(area){
if(area==='screen'){
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
}else {
this.$refs['localLoading'+this.chartIndex].startLoading();
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();
endLoading(area) {
if (area === 'screen') {
this.$refs['localLoadingScreen' + this.chartIndex].endLoading();
} else {
this.$refs['localLoading' + this.chartIndex].endLoading();
}
},
resize(chartItem) {
let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
let deHeight = this.$chartResizeTool.titleHeight + this.$chartResizeTool.chartTableBlankHeight;
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
container.style.height = `calc(100% - ${deHeight*2}px)`;
container.style.height = `calc(100% - ${deHeight * 2}px)`;
this.tableHeight = `calc(100% - ${this.$refs.Pagination.$el.offsetHeight}px)`;
this.$nextTick(() => {
container.querySelector(".el-table__body-wrapper")._ps_.update();
@@ -271,28 +295,28 @@ export default {
},
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
this.dropdownMenuShow = false;
this.startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
},
// 编辑图表
editChart() {
this.dropdownMenuShow=false;
this.dropdownMenuShow = false;
this.$emit('on-edit-chart-block', this.data.id);
},
// 删除该图表
removeChart() {
this.dropdownMenuShow=false;
this.dropdownMenuShow = false;
this.$emit('on-remove-chart-block', this.data.id);
},
//全屏时间条件查询
dateChange(time) {
this.searchTime = [...time];
this.seriesItemScreen = [];
for(let i=0;i<8;i++){
for (let i = 0; i < 8; i++) {
this.seriesItemScreen.push({//表格数据
element:'',
element: '',
time: '',//采集时间
value: '',//数值
});
@@ -301,28 +325,28 @@ export default {
this.$emit('on-search-data', this.data.id, this.searchTime);
},
clickos() {
this.dropdownMenuShow=false;
this.dropdownMenuShow = false;
},
clearChart(){
clearChart() {
this.data = {};
},
duplicate(){
this.dropdownMenuShow=false;
const param = {id:this.data.id};
this.$post('panel/'+ this.data.panelId+'/charts/duplicate',(param)).then(response => {
duplicate() {
this.dropdownMenuShow = false;
const param = {id: this.data.id};
this.$post('panel/' + this.data.panelId + '/charts/duplicate', (param)).then(response => {
if (response.code === 200) {
this.$message({
duration: 2000,
type: 'success',
message: this.$t("tip.duplicateSuccess")
});
this.$emit('on-duplicate-chart-block', this.data.id,response.data);
}else {
if(response.msg){
this.$emit('on-duplicate-chart-block', this.data.id, response.data);
} else {
if (response.msg) {
this.$message.error(response.msg);
}else if(response.error){
} else if (response.error) {
this.$message.error(response.error);
}else {
} else {
this.$message.error(response);
}
}
@@ -330,7 +354,7 @@ export default {
},
// 全屏查看
showAllScreen() {
this.dropdownMenuShow=false;
this.dropdownMenuShow = false;
// 初始化同步时间
this.searchTime = [];
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
@@ -341,27 +365,44 @@ export default {
this.screenModal = true;
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
if(errorMsg && errorMsg!==''){
setData(chartItem, seriesItem, panelId, filter, area, errorMsg) {
if (errorMsg && errorMsg !== '') {
this.isError = true;
this.errorContent = errorMsg;
}else {
} else {
this.isError = false;
this.errorContent = '';
}
if(area==='showFullScreen'){//全屏按时间查询
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
seriesItem=seriesItem.map(item=>{
if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
let type=chartItem.param.valueMapping.type;
let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
let value = item.value;
let mapping;
if(type == 'value'){
mapping=mappings.find(t=>{return t.value == value})
}else{
mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
}
item.value = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(value,null,2);
}
return item;
})
if (area === 'showFullScreen') {//全屏按时间查询
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.storedTableDataScreenOld=Object.assign([],this.storedScreanTableData);
this.screenPageObj.total=this.storedScreanTableData.length;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj,'seriesScreen');
this.storedScreanTableData = seriesItem;
this.storedScreanTableData = Object.assign([], this.storedScreanTableData.reverse());
this.storedTableDataScreenOld = Object.assign([], this.storedScreanTableData);
this.screenPageObj.total = this.storedScreanTableData.length;
this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen');
this.endLoading('screen');
} else{
} else {
//设置高度 chart-table
this.divFirstShow = true;
this.$nextTick(() => {
@@ -370,18 +411,16 @@ export default {
this.firstShow = true; // 展示操作按键
this.panelIdInner = panelId;
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
this.storedTableData =seriesItem;
this.storedScreanTableData=seriesItem;
this.storedTableData=Object.assign([],this.storedTableData.reverse());
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
this.storedTableDataOld =Object.assign([],this.storedTableData);
this.storedTableDataScreenOld =Object.assign([],this.storedScreanTableData);
this.pageObj.total=this.storedTableData.length;
this.screenPageObj.total=this.storedScreanTableData.length;
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj,'series');
this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj,'seriesScreen')
this.storedTableData = seriesItem;
this.storedScreanTableData = seriesItem;
this.storedTableData = Object.assign([], this.storedTableData.reverse());
this.storedScreanTableData = Object.assign([], this.storedScreanTableData.reverse());
this.storedTableDataOld = Object.assign([], this.storedTableData);
this.storedTableDataScreenOld = Object.assign([], this.storedScreanTableData);
this.pageObj.total = this.storedTableData.length;
this.screenPageObj.total = this.storedScreanTableData.length;
this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series');
this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
if (filter) { // 保存数据,用于同步时间
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
@@ -392,29 +431,29 @@ export default {
}
},
// 数据排序
tableDataSort(item){
this.orderBy={order:item.order,prop:item.prop};
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj,'series');
tableDataSort(item) {
this.orderBy = {order: item.order, prop: item.prop};
this.seriesItem = this.filterShowData(this.storedTableData, this.pageObj, 'series');
},
// 全屏数据排序
tableDataSortScreen(item){
this.orderByScreen={order:item.order,prop:item.prop};
this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj,'seriesScreen')
tableDataSortScreen(item) {
this.orderByScreen = {order: item.order, prop: item.prop};
this.seriesItemScreen = this.filterShowData(this.storedScreanTableData, this.screenPageObj, 'seriesScreen')
},
dealLegendAlias:function(legend,expression){
if(/\{\{.+\}\}/.test(expression)){
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){
let label=i.substr(i.indexOf('{{')+2,i.indexOf('}}')-i.indexOf('{{')-2)
let reg=new RegExp(label+'=".+?"')
let value=null;
if(reg.test(legend)){
let find=legend.match(reg)[0];
value=find.substr(find.indexOf('"')+1,find.lastIndexOf('"')-find.indexOf('"')-1);
dealLegendAlias: function (legend, expression) {
if (/\{\{.+\}\}/.test(expression)) {
let labelValue = expression.replace(/(\{\{.+?\}\})/g, function (i) {
let label = i.substr(i.indexOf('{{') + 2, i.indexOf('}}') - i.indexOf('{{') - 2)
let reg = new RegExp(label + '=".+?"')
let value = null;
if (reg.test(legend)) {
let find = legend.match(reg)[0];
value = find.substr(find.indexOf('"') + 1, find.lastIndexOf('"') - find.indexOf('"') - 1);
}
return value?value:label;
return value ? value : label;
})
return labelValue
}else{
} else {
return expression;
}
},
@@ -452,5 +491,5 @@ export default {
beforeDestroy() {
this.clearChart();
},
};
};
</script>

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

@@ -143,7 +143,7 @@
</el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
<template slot-scope="scope">
{{ unit.compute(scope.row.value,null,2)}}
{{scope.row.value}}
</template>
</el-table-column>
</el-table>
@@ -1028,8 +1028,25 @@
},
// 设置数据
setTableData(seriesItem) {
console.log('set table data',this.chart)
this.unit = chartDataFormat.getUnit(this.chart.unit);
seriesItem=seriesItem.map(item=>{
if(this.chart.param.valueMapping && this.chart.param.valueMapping.type){
let type=this.chart.param.valueMapping.type;
let mappings=this.chart.param.valueMapping.mapping?this.chart.param.valueMapping.mapping:[];
let value = item.value;
let mapping;
if(type == 'value'){
mapping=mappings.find(t=>{return t.value == value})
}else{
mapping=mappings.find(t=>{return t.from <= value&& t.to >= value});
}
item.value = mapping?mapping.text:this.unit.compute(value,null,2);
console.log('value',value,'mapping',mapping)
}
return item;
})
this.storedScreanTableData=seriesItem;
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
this.screenPageObj.total=this.storedScreanTableData.length;

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

@@ -37,7 +37,7 @@
<el-dropdown trigger="click" 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.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
<span class="chart-title-text">{{chartData.title}}-[{{chartData.id}}]</span>
<span class="chart-title-icon" v-if="filter.from != 'alertRule'"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<ul v-if="filter.from != 'alertRule'" 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;" >

42
nezha-fronted/src/components/common/alert/alertLabel.vue
View File

@@ -93,6 +93,37 @@
<div class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
</div>
</div>
<div class="alert-label-info" v-if="type==='endpoint'" v-loading="loading">
<div class="alert-label-box">
<div class="alert-label-title">ID</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.id:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Project</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.project.name:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Module</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.module.name:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Labels</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.labels:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Host</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.host:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Port</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.port:''}}</div>
</div>
<div class="alert-label-box">
<div class="alert-label-title">Path</div>
<div class="alert-label-value">{{alertLabelData?alertLabelData.path:''}}</div>
</div>
</div>
</div>
</template>
@@ -227,6 +258,17 @@
}
})
}
if(this.type==='endpoint'){
this.$get('/endpoint?id='+this.id).then((res)=>{
if(res.msg==='success'){
this.loading=false;
this.alertLabelData=res.data.list[0];
console.log(this.alertLabelData)
} else{
this.$message.error(res.msg);
}
})
}
},
}

3
nezha-fronted/src/components/common/alert/alertMessageTable.vue
View File

@@ -98,7 +98,7 @@
</nz-alert-tag>
</span>
<alertLabel
v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project') && scope.row[item.label] && scope.row[item.label].loading"
v-if="(item.label === 'asset' ||item.label === 'module' || item.label === 'project'||item.label === 'endpoint') && scope.row[item.label] && scope.row[item.label].loading"
:id="scope.row[item.label].id"
:that="scope.row[item.label]"
:type="item.label"
@@ -794,6 +794,7 @@
switch(labelType){
case 'asset':
case 'module':
case 'endpoint':
case 'project':
return false;
default: return true;

2
nezha-fronted/src/components/common/leftMenu.vue
View File

@@ -520,9 +520,11 @@
this.pingData.map(item=>{
if(response.data.ping){
let data=response.data.ping.find(t=>t.name == item.label);
if(data){
item.total = data.total;
item.value = data.status
}
}
return item;
})

2
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -569,7 +569,7 @@
}
},
afterTableListChange:function(){
this.getTableData();
// this.getTableData();
bus.$emit('asset-list-change')
},
pageNo(val) {

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

@@ -230,18 +230,18 @@
</span>
</el-row>
<!--value mapping start-->
<div class="right-box-sub-title" v-if="editChart.type == 'singleStat'">
<div class="right-box-sub-title" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
<span>{{$t('dashboard.panel.chartForm.valMapping.name')}}</span>
<span class="float-right" @click="addMapping"><i style="font-size: 16px; cursor: pointer;" class="nz-icon nz-icon-create-square"></i></span>
</div>
<div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'"></div>
<el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'">
<div style="margin-bottom: 20px; width: 100%" v-if="editChart.type == 'singleStat'||editChart.type == 'table'"></div>
<el-form-item :label="$t('dashboard.panel.chartForm.type')" prop="span" v-if="editChart.type == 'singleStat'||editChart.type == 'table'">
<el-radio-group v-model="editChart.param.valueMapping.type" fill="#FA901C" text-color="#FA901C" size="small" class="val-mapping-type" @change="valueMappingChange">
<el-radio-button label="value" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.value')}}</el-radio-button>
<el-radio-button label="range" border class="no-fill">{{$t('dashboard.panel.chartForm.valMapping.range')}}</el-radio-button>
</el-radio-group>
</el-form-item>
<template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'value'">
<template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'value'">
<template v-for="(mapping,index) in editChart.param.valueMapping.mapping">
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.value')" prop="span" class="half-form-item-other" >
<el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
@@ -252,7 +252,7 @@
</el-form-item>
</template>
</template>
<template v-if="editChart.type == 'singleStat'&&editChart.param.valueMapping.type == 'range'">
<template v-if="(editChart.type == 'singleStat'||editChart.type == 'table')&&editChart.param.valueMapping.type == 'range'">
<template v-for="(mapping,index) in editChart.param.valueMapping.mapping">
<div class="half-form-item-other" style="display: inline-block;margin-left: 70px">
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.from')" prop="span" class="one-third-form-item-left" >
@@ -1179,6 +1179,13 @@
this.editChart.param={nullType:this.editChart.param.nullType,threshold:'',legendValue:{min:'off',max:'off',avg:'off',last:'off',total:'off'}}
}else if(chartType == 'table'){
this.$set(this.editChart.param,'last',0)
this.editChart.param={
statistics:'',
valueMapping:{
type:'value',
mapping:[{text:'',value:''}]
}
}
}
/*if(this.$refs.chartTag){
this.$refs.chartTag.forEach((item, index) => {
@@ -1253,6 +1260,7 @@
params.param.threshold=this.editChart.param.threshold;
if(this.editChart.type==='table'){
delete params.param.threshold;
params.param.valueMapping=this.editChart.param.valueMapping;
}
params.param.nullType=this.editChart.param.nullType;
params.param.legendValue=this.editChart.param.legendValue;
@@ -1386,6 +1394,7 @@
this.setIsSingleStat();
} else if(n.type === 'table'){
n.param.last?this.$set(this.editChart.param,'last',n.param.last):this.$set(this.editChart.param,'last',0)
n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:''}]})
}else {
this.setIsOtherChart();
n.param&&!n.param.legendValue&&this.$set(this.editChart.param,'legendValue',{min:'off',max:'off',avg:'off',last:'off',total:'off'})