From 32aca4099029ed5c650b13f5ecb698a55179166a Mon Sep 17 00:00:00 2001
From: zhangyu <zhangyu@geedgenetworks.com>
Date: Mon, 27 Dec 2021 16:18:54 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9Atable=E6=8E=92=E5=BA=8F=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/chart/chart/chartBar.vue   |   2 +-
 .../src/components/chart/chart/chartGauge.vue |   2 +-
 .../src/components/chart/chart/chartTable.vue | 100 +++++++++++++++++-
 .../components/chart/chart/chartTreemap.vue   |   2 +-
 4 files changed, 100 insertions(+), 6 deletions(-)

diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue
index 36059fae7..444a99bf9 100644
--- a/nezha-fronted/src/components/chart/chart/chartBar.vue
+++ b/nezha-fronted/src/components/chart/chart/chartBar.vue
@@ -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>
diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue
index e36b7fdd0..11460a54d 100644
--- a/nezha-fronted/src/components/chart/chart/chartGauge.vue
+++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue
@@ -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>
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index 3bade4be2..b1d550196 100644
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -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()
diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
index c2b9fc7fb..80fb49754 100644
--- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
@@ -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>