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

feat：chart table增加本地排序

Browse Source
This commit is contained in:
zhangyu
2020-10-26 16:24:13 +08:00
parent 17c4b4dc26
commit 44753abcff
2 changed files with 131 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,14 +41,14 @@
</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>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" ></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260">
<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">
<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)}}
</template>
@@ -64,14 +64,14 @@
<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>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" min-width="100" ></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="420">
<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">
<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)}}
</template>
@@ -135,10 +135,14 @@ export default {
pageSize: 50,
total: 0
},
storedTableDataOld:[],//原始信息
storedTableDataScreenOld:[],//全屏原始信息
storedTableData:[],
storedScreanTableData:[],
seriesItem: [], // 保存信息
seriesItemScreen:[],//全屏数据
seriesItemScreen:[],//全屏数据,
orderBy:null,//排序非全屏
orderByScreen:null,//排序全屏
images: '',
loading:Object,
items: {
@@ -192,14 +196,35 @@ export default {
methods: {
pageNo(val) {
this.pageObj.pageNo = val;
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj)
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj,'series')
},
pageSize(val) {
this.pageObj.pageSize = val;
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj)
this.seriesItem=this.filterShowData(this.storedTableData,this.pageObj,'series')
},
filterShowData(source,pageObj){
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(!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));
}
}
return source.slice((pageObj.pageNo-1)*pageObj.pageSize,pageObj.pageNo*pageObj.pageSize)
},
startResize(e) {
let vm = this;
@@ -207,11 +232,11 @@ export default {
},
screenPageNo(val) {
this.screenPageObj.pageNo = val;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj,'seriesScreen')
},
screenPageSize(val) {
this.screenPageObj.pageSize = val;
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj)
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData, this.screenPageObj,'seriesScreen')
},
startLoading(area){
if(area==='screen'){
@@ -332,8 +357,9 @@ export default {
// 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);
this.seriesItemScreen=this.filterShowData(this.storedScreanTableData,this.screenPageObj,'seriesScreen');
this.endLoading('screen');
} else{
//设置高度 chart-table
@@ -350,10 +376,12 @@ export default {
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);
this.seriesItemScreen =this.filterShowData(this.storedScreanTableData,this.screenPageObj)
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;
@@ -363,6 +391,16 @@ export default {
this.endLoading();
}
},
// 数据排序
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')
},
dealLegendAlias:function(legend,expression){
if(/\{\{.+\}\}/.test(expression)){
let labelValue=expression.replace(/(\{\{.+?\}\})/g,function(i){

76
nezha-fronted/src/components/common/js/tools.js
View File

@@ -662,6 +662,82 @@ export const tableSet = {
default: break;
}
},
// 本地正序
desc (prop) {
return function (obj1, obj2) {
let val1 = obj1[prop];
let val2 = obj2[prop];
if (!isNaN(val1) && !isNaN(val2) && prop==='value') {
val1 = Number(val1);
val2 = Number(val2);
}
if(prop==='time'){
val1 = tableSet.strTodate(val1);
val2 = tableSet.strTodate(val2);
}
if(prop==='element'){
if(val1.alias){
val1 = JSON.stringify(obj1[prop].alias).replace(/\s*/g,"");
}else{
val1 = JSON.stringify(obj1[prop].element).replace(/\s*/g,"");
}
if(val2.alias){
val2 = JSON.stringify(obj2[prop].alias).replace(/\s*/g,"");
}else{
val2 = JSON.stringify(obj2[prop].element).replace(/\s*/g,"");
}
}
if (val1 < val2) {
return -1;
} else if (val1 > val2) {
return 1;
} else {
return 0;
}
}
},
//本地倒序
asce (prop) {
return function (obj1, obj2) {
let val1 = obj1[prop];
let val2 = obj2[prop];
console.log(val1,val2);
if (!isNaN(Number(val1)) && !isNaN(Number(val2)) && prop!=='time') {
val1 = Number(val1);
val2 = Number(val2);
}
if(prop==='time'){
val1 = tableSet.strTodate(val1);
val2 = tableSet.strTodate(val2);
}
if(prop==='element'){
if(val1.alias){
val1 = JSON.stringify(obj1[prop].alias).replace(/\s*/g,"");
}else{
val1 = JSON.stringify(obj1[prop].element).replace(/\s*/g,"");
}
if(val2.alias){
val2 = JSON.stringify(obj2[prop].alias).replace(/\s*/g,"");
}else{
val2 = JSON.stringify(obj2[prop].element).replace(/\s*/g,"");
}
}
if (val1 < val2) {
return 1;
} else if (val1 > val2) {
return -1;
} else {
return 0;
}
}
},
// 转化时间字符串为时间戳
strTodate(str){
let date = str.trim();
date = date.substring(0,19);
date = date.replace(/-/g,'/'); //必须把日期'-'转为'/'
return new Date(date).getTime();
}
}
export function blankPromise() {