From 54e09846eab305ec11a550ef10cbb0044dd2e64a Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Tue, 12 Apr 2022 10:32:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:ping=E3=80=81trace=E5=88=97=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=89=8D=E7=AB=AF=E6=8E=92=E5=BA=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/table/tool/pingTable.vue           | 29 ++++++++++------
 .../common/table/tool/traceTable.vue          | 34 ++++++++-----------
 2 files changed, 34 insertions(+), 29 deletions(-)

diff --git a/nezha-fronted/src/components/common/table/tool/pingTable.vue b/nezha-fronted/src/components/common/table/tool/pingTable.vue
index 047019deb..2f01f65c4 100644
--- a/nezha-fronted/src/components/common/table/tool/pingTable.vue
+++ b/nezha-fronted/src/components/common/table/tool/pingTable.vue
@@ -23,6 +23,7 @@
       :resizable="true"
       :width="`${item.width}`"
       class="data-column"
+      :sortable="item.sortable"
     >
       <template slot="header">
         <span class="data-column__span">{{item.label}}</span>
@@ -30,8 +31,8 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'state'">
-          <div class="active-icon green-bg inline-block" v-if="scope.row.state"></div>
-          <div class="active-icon gray-bg inline-block" v-else></div>
+          <div class="active-icon green-bg inline-block" v-if="scope.row.state===1"></div>
+          <div class="active-icon red-bg inline-block" v-else></div>
         </template>
         <span v-else-if="item.prop === 'dc'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop].name}}</span>
         <span v-else-if="item.prop === 'rate'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}%</span>
@@ -65,28 +66,36 @@ export default {
       tableTitle: [ // 原table列
         {
           label: this.$t('overall.dc'),
-          prop: 'dc'
+          prop: 'dc',
+          sortable: true
         }, {
           label: this.$t('ping.sourceIp'),
-          prop: 'source'
+          prop: 'source',
+          sortable: true
         }, {
           label: this.$t('ping.targetIp'),
-          prop: 'ip'
+          prop: 'ip',
+          sortable: true
         }, {
           label: this.$t('overall.state'),
-          prop: 'state'
+          prop: 'state',
+          sortable: true
         }, {
           label: this.$t('ping.packetLossRate'),
-          prop: 'rate'
+          prop: 'rate',
+          sortable: true
         }, {
           label: this.$t('ping.rttAverage'),
-          prop: 'avg'
+          prop: 'avg',
+          sortable: true
         }, {
           label: this.$t('ping.rttMinimum'),
-          prop: 'min'
+          prop: 'min',
+          sortable: true
         }, {
           label: this.$t('ping.rttMaximum'),
-          prop: 'max'
+          prop: 'max',
+          sortable: true
         }
       ]
     }
diff --git a/nezha-fronted/src/components/common/table/tool/traceTable.vue b/nezha-fronted/src/components/common/table/tool/traceTable.vue
index efe8bcfb2..09db730d0 100644
--- a/nezha-fronted/src/components/common/table/tool/traceTable.vue
+++ b/nezha-fronted/src/components/common/table/tool/traceTable.vue
@@ -23,6 +23,7 @@
       :resizable="true"
       :width="`${item.width}`"
       class="data-column"
+      :sortable="item.sortable"
     >
       <template slot="header">
         <span class="data-column__span">{{item.label}}</span>
@@ -30,12 +31,11 @@
       </template>
       <template slot-scope="scope" :column="item">
         <template v-if="item.prop === 'state'">
-          <div class="active-icon green-bg inline-block" v-if="scope.row.state"></div>
-          <div class="active-icon gray-bg inline-block" v-else></div>
+          <div class="active-icon green-bg inline-block" v-if="scope.row.state===1"></div>
+          <div class="active-icon red-bg inline-block" v-else></div>
         </template>
         <span v-else-if="item.prop === 'dc'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop].name}}</span>
-        <span v-else-if="item.prop === 'rate'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}%</span>
-        <span v-else-if="(item.prop === 'avg'||item.prop === 'min'||item.prop === 'max')&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}ms</span>
+        <span v-else-if="item.prop === 'time'&&scope.row[item.prop]!==undefined">{{scope.row[item.prop]}}ms</span>
         <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>
@@ -65,28 +65,24 @@ export default {
       tableTitle: [ // 原table列
         {
           label: this.$t('overall.dc'),
-          prop: 'dc'
+          prop: 'dc',
+          sortable: true
         }, {
           label: this.$t('ping.sourceIp'),
-          prop: 'source'
+          prop: 'source',
+          sortable: true
         }, {
           label: this.$t('ping.targetIp'),
-          prop: 'ip'
+          prop: 'ip',
+          sortable: true
         }, {
           label: this.$t('overall.state'),
-          prop: 'state'
+          prop: 'state',
+          sortable: true
         }, {
-          label: this.$t('ping.packetLossRate'),
-          prop: 'rate'
-        }, {
-          label: this.$t('ping.rttAverage'),
-          prop: 'avg'
-        }, {
-          label: this.$t('ping.rttMinimum'),
-          prop: 'min'
-        }, {
-          label: this.$t('ping.rttMaximum'),
-          prop: 'max'
+          label: this.$t('trace.totalTime'),
+          prop: 'time',
+          sortable: true
         }
       ]
     }