NEZ-1780feat:Ping页面接口对接

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()
   }
 }