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

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

@@ -143,7 +143,7 @@
</el-table-column> </el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90"> <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" width="90">
<template slot-scope="scope"> <template slot-scope="scope">
{{ unit.compute(scope.row.value,null,2)}} {{scope.row.value}}
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -1028,8 +1028,25 @@
}, },
// 设置数据 // 设置数据
setTableData(seriesItem) { setTableData(seriesItem) {
console.log('set table data',this.chart)
this.unit = chartDataFormat.getUnit(this.chart.unit); 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=seriesItem;
this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse()); this.storedScreanTableData=Object.assign([],this.storedScreanTableData.reverse());
this.screenPageObj.total=this.storedScreanTableData.length; 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 trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu> <el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow"> <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 class="chart-title-icon" v-if="filter.from != 'alertRule'"><i class="nz-icon nz-icon-xialaxuanze " :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</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;" > <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 class="alert-label-value">{{alertLabelData?(alertLabelData.remark?alertLabelData.remark:'-'):''}}</div>
</div> </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> </div>
</template> </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> </nz-alert-tag>
</span> </span>
<alertLabel <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" :id="scope.row[item.label].id"
:that="scope.row[item.label]" :that="scope.row[item.label]"
:type="item.label" :type="item.label"
@@ -794,6 +794,7 @@
switch(labelType){ switch(labelType){
case 'asset': case 'asset':
case 'module': case 'module':
case 'endpoint':
case 'project': case 'project':
return false; return false;
default: return true; default: return true;

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

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

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

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

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

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