From d3bb814ba42d8743d12121992909e4fc2b6a2da3 Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Fri, 8 Apr 2022 14:23:48 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1780feat:Ping=E9=A1=B5=E9=9D=A2=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=AF=B9=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/table/settings/pingTable.vue       |  9 +-
 .../src/components/page/tool/ping.vue         | 85 +++++++++++--------
 nezha-fronted/static/config.json              |  2 +-
 3 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/nezha-fronted/src/components/common/table/settings/pingTable.vue b/nezha-fronted/src/components/common/table/settings/pingTable.vue
index f0be62ad3..047019deb 100644
--- a/nezha-fronted/src/components/common/table/settings/pingTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/pingTable.vue
@@ -30,9 +30,12 @@
       </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===1"></div>
-          <div class="active-icon gray-bg inline-block" v-else-if="scope.row.state===0"></div>
+          <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>
         </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="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
         <span v-else>-</span>
       </template>
@@ -62,7 +65,7 @@ export default {
       tableTitle: [ // 原table列
         {
           label: this.$t('overall.dc'),
-          prop: 'dataCenter'
+          prop: 'dc'
         }, {
           label: this.$t('ping.sourceIp'),
           prop: 'source'
diff --git a/nezha-fronted/src/components/page/tool/ping.vue b/nezha-fronted/src/components/page/tool/ping.vue
index ed9bc0c9d..4dc4e07e9 100644
--- a/nezha-fronted/src/components/page/tool/ping.vue
+++ b/nezha-fronted/src/components/page/tool/ping.vue
@@ -5,7 +5,7 @@
       :from="fromRoute.ping"
     >
     <template v-slot:top-tool-left>
-      <el-input v-model="ip" @focus="ipFocus=true" size='medium' style="width:250px" :placeholder="$t('overall.placeHolder')+' IP/Hostname'"></el-input>
+      <el-input v-model="ip" size='medium' style="width:250px" :placeholder="$t('overall.placeHolder')+' IP/Hostname'"></el-input>
       <el-popover
         placement="bottom"
         width="220"
@@ -16,7 +16,7 @@
         >
         <el-form size="small" ref="ruleForm" label-position="top" :model="ruleForm" :rules="formRules">
           <el-form-item style="margin-bottom:0px">
-            <p class="pop-tit">{{$t('overall.dc')}}</p>
+            <p class="pop-tit">{{$t('ping.dcs')}}</p>
             <ul class="pop-list-wrap">
               <li class="el-dropdown-menu__item">
                 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange">{{$t('overall.all')}}</el-checkbox>
@@ -31,7 +31,7 @@
             </ul>
           </el-form-item>
           <el-form-item prop="timeout" style="margin-bottom:10px">
-            <div class="pop-tit">{{$t('ping.timeOut')}}</div>
+            <div class="pop-tit">{{$t('ping.timeout')}}</div>
             <div class="wrap" style="height:32px">
               <el-input v-model.number="ruleForm.timeout" placeholder="" >
                 <template slot="append">{{$t('config.system.basic.second')}}</template>
@@ -44,7 +44,7 @@
         </el-button>
       </el-popover>
 
-      <el-button class="top-tool-btn btn" v-if="!flag" @click="startTask">
+      <el-button class="top-tool-btn btn" v-if="!isStart" @click="startTask">
         <i class="el-icon-caret-right"></i>
       </el-button>
       <el-button class="top-tool-btn btn" v-else @click="clearTask">
@@ -54,7 +54,7 @@
 
     <template v-slot:default>
       <!-- 初始展示的内容 ip输入框聚焦后消失 -->
-      <div class="empty" v-if="!ipFocus">
+      <div class="empty" v-if="tid===undefined">
         <el-steps align-center>
           <el-step>
             <span class="nz-icon nz-icon-edit" slot="icon"></span>
@@ -71,11 +71,11 @@
         </el-steps>
       </div>
       <!-- 存在任务id时展示表格 -->
-      <div class="data-wrap" v-show="tid">
+      <div class="data-wrap" v-show="tid!==undefined">
         <div class="data-top">
           <span>IP {{$t('ping.total')}}:{{total}}</span>
-          <span>{{$t('ping.done')}}:{{tableData.length}}</span>
-          <span>{{$t('ping.progress')}}:{{parseInt(tableData.length/total*100)}}%</span>
+          <span>{{$t('ping.done')}}:{{done}}</span>
+          <span>{{$t('ping.progress')}}:{{process}}%</span>
         </div>
         <div class="data-bottom">
           <ping-table
@@ -106,12 +106,12 @@ export default {
   },
   data () {
     return {
+      // 防止用户重复点击
+      flag: true,
       loading: false,
       // 弹出框是否显示
       visible: false,
       ip: '',
-      // ip输入框是否聚焦
-      ipFocus: false,
       // 是否全选
       checkAll: true,
       isIndeterminate: false,
@@ -120,13 +120,17 @@ export default {
       // 复选框选中的值
       checked: [],
       // 是否正在请求数据
-      flag: false,
+      isStart: false,
       // 定时器id
       timer: null,
       // 任务id
-      tid: 0,
+      tid: undefined,
       // 表格总数据
       total: 0,
+      // 已完成
+      done: 0,
+      // 进度
+      process: 0,
       // 表格数据
       tableData: [],
       ruleForm: {
@@ -178,12 +182,10 @@ export default {
       if (!ipv4.test(this.ip) && !ipv6.test(this.ip)) {
         return this.$message.error(this.$t('validate.host'))
       }
-      if (this.timer) {
-        clearInterval(this.timer)
-        this.timer = null
+      if (!this.flag) {
+        return false
       }
-      // 标记正在请求中
-      this.flag = true
+      this.flag = false
       this.getId()
     },
     // 请求dataCenter
@@ -198,54 +200,63 @@ export default {
     },
     // 请求任务id
     async getId () {
-      this.tableData = []
       const params = {
         ip: this.ip,
         dcIds: this.checked.join(','),
         timeout: this.ruleForm.timeout
       }
       this.$get('/tool/ping', params).then(response => {
-        // this.tid = response.data
-        this.tid = 111
-        this.total = 30
+        // 清空上一次任务的数据
+        this.done = 0
+        this.total = 0
+        this.process = 0
+        this.tableData = []
+        this.tid = response.data.tid
+        this.isStart = true // 标记正在请求数据中
+        this.flag = true
         this.timer = setInterval(() => {
-          if (this.tableData.length < this.total) {
+          if (parseInt(this.process) < 100) {
             this.getData()
           } else {
             this.clearTask()
           }
-        }, 1000)
+        }, 300)
       })
     },
     // 请求表格数据
     getData () {
+      const currentId = this.tid
       this.$get('/tool/ping/result/' + this.tid).then(response => {
-        this.tableData.push({
-          dataCenter: '数据中心',
-          source: '192.168.40.1',
-          ip: '192.168.40.2',
-          state: 1,
-          rate: 20.0,
-          avg: 30,
-          min: 23,
-          max: 44,
-          raw: '正在 Ping 127.0.0.1 具有 32 字节的数据:\r\n来自 127.0.0.1 的回复: 字节=32 时间<1ms TTL=64\r\n来自 127.0.0.1 的回复: 字节=32 时间<1ms TTL=64\r\n来自 127.0.0.1 的回复: 字节=32 时间<1ms TTL=64\r\n来自 127.0.0.1 的回复: 字节=32 时间<1ms TTL=64\r\n\r\n127.0.0.1 的 Ping 统计信息:\r\n    数据包: 已发送 = 4，已接收 = 4，丢失 = 0 (0% 丢失)，\r\n往返行程的估计时间(以毫秒为单位):\r\n    最短 = 0ms，最长 = 0ms，平均 = 0ms'
-        })
+        if (currentId === this.tid && parseInt(this.process) < 100) {
+          this.done = response.data.task.done
+          this.total = response.data.task.total
+          this.process = response.data.task.process
+          this.tableData.push(...response.data.list)
+        }
       })
     },
     // 清除任务
     async clearTask () {
+      if (!this.flag) {
+        return false
+      }
+      this.flag = false
       if (this.timer) {
         clearInterval(this.timer)
         this.timer = null
       }
       await this.$get('/tool/ping/cancel/' + this.tid)
-      this.flag = false
-    }
+      this.isStart = false
+      this.flag = true
+    },
+    // 空函数 防止mixins中的函数执行
+    getTableData () { }
   },
   // 离开页面的时候触发
   async beforeRouteLeave (to, from, next) {
-    await this.clearTask()
+    if (this.tid) {
+      await this.clearTask()
+    }
     next()
   }
 }
diff --git a/nezha-fronted/static/config.json b/nezha-fronted/static/config.json
index abcddc473..5f74f5d01 100644
--- a/nezha-fronted/static/config.json
+++ b/nezha-fronted/static/config.json
@@ -1 +1 @@
-{"baseUrl":"http://192.168.40.42:8080/", "version": "21.04"}
+{"baseUrl":"/", "version": "21.04"}