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

fix：table排序修改

Browse Source
This commit is contained in:
zhangyu
2021-12-27 16:18:54 +08:00
parent 57f06c050d
commit 32aca40990
4 changed files with 100 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -160,7 +160,7 @@ export default {
return `
<div>
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.name}</div>
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>

2
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -215,7 +215,7 @@ export default {
const self = this
return `<div>
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.name}</div>
<div style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>

100
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -6,10 +6,11 @@
:data="tableData"
:height="'100%'"
border
@sort-change="tableDataSort"
>
<!-- @sort-change="tableDataSort"-->
<el-table-column
v-for="(col, index) in columns"
:prop="col.title"
:key="`col-${index}`"
:min-width="100"
:sort-orders="['ascending', 'descending']"
@@ -51,6 +52,7 @@ export default {
data () {
return {
tableData: [],
oldTableData: [],
columns: [],
valueMapping: {},
tableTimer: null
@@ -83,6 +85,7 @@ export default {
item.valueMapping = this.selectTableMapping(item, this.valueMapping)
})
this.tableData = arr
this.oldTableData = lodash.cloneDeep(arr)
this.$refs.dataTable && this.$refs.dataTable.doLayout()
}, 200)
},
@@ -139,6 +142,23 @@ export default {
this.$emit('chartIsNoData', this.isNoData)
return returnData
},
filterShowData (source) {
let orderBy = null
let sourceData = null
sourceData = this.oldTableData
orderBy = this.orderBy
if (!orderBy || !orderBy.order) { // 没有排序 恢复默认值
source = Object.assign([], sourceData)
} else { // 排序之后的顺序
if (orderBy.order === 'ascending') {
source = source.sort(this.asce(orderBy.prop))
}
if (orderBy.order === 'descending') {
source = source.sort(this.desc(orderBy.prop))
}
}
return source
},
selectTableMapping (row, valueMapping) {
const obj = {}
this.columns.forEach((column) => {
@@ -221,8 +241,82 @@ export default {
}
},
tableDataSort (orderBy) {
}
console.log(orderBy)
this.orderBy = { order: orderBy.order, prop: orderBy.prop }
this.seriesItem = this.filterShowData(this.tableData)
},
// 本地正序
asce (prop) {
return function (obj1, obj2) {
let val1 = obj1[prop]
let val2 = obj2[prop]
if (prop === 'value') {
val1 = obj1.oldValue
val2 = obj2.oldValue
if (!isNaN(Number(val1)) && !isNaN(Number(val2)) && prop === 'value') {
val1 = Number(val1)
val2 = Number(val2)
}
} else if (prop === 'time') {
val1 = this.$tableSet.strTodate(val1)
val2 = this.$tableSet.strTodate(val2)
} else {
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
}
}
},
// 本地倒序
desc (prop) {
return function (obj1, obj2) {
let val1 = obj1[prop]
let val2 = obj2[prop]
if (prop === 'value') {
val1 = obj1.oldValue
val2 = obj2.oldValue
if (!isNaN(Number(val1)) && !isNaN(Number(val2)) && prop === 'value') {
val1 = Number(val1)
val2 = Number(val2)
}
} else if (prop === 'time') {
val1 = this.$tableSet.strTodate(val1)
val2 = this.$tableSet.strTodate(val2)
} else {
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
}
}
},
},
mounted () {
this.chartInfo.loaded && this.initChart()

2
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -140,7 +140,7 @@ export default {
return `
<div>
<div style="white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis; min-width: 150px; max-width: 600px; line-height: 18px; font-size: 14px;">
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.name}</div>
<div style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div>
<div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'none' : 'inline-block'}">${params.data.showValue}</div>