diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue index 6c4887867..7fd4894a6 100644 --- a/nezha-fronted/src/components/charts/chart-table.vue +++ b/nezha-fronted/src/components/charts/chart-table.vue @@ -41,14 +41,14 @@
- - - + + + - + @@ -64,14 +64,14 @@
- - - + + + - + @@ -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){ diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js index f1023b4fb..cd3e6d3ab 100644 --- a/nezha-fronted/src/components/common/js/tools.js +++ b/nezha-fronted/src/components/common/js/tools.js @@ -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() {