From d51e8833b2e4d46f289bfc9090383113e06b9a6f Mon Sep 17 00:00:00 2001
From: zyh <zhuyanheng@geedgenetworks.com>
Date: Thu, 14 Apr 2022 17:41:00 +0800
Subject: [PATCH] =?UTF-8?q?NEZ-1789=20feat=EF=BC=9Aping,trace=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=20=E6=94=B9=E4=B8=BA=E6=A0=87=E7=AD=BE=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../assets/css/components/page/tool/ping.scss | 47 ++++++++++++-
 .../css/components/page/tool/trace.scss       | 47 ++++++++++++-
 .../common/table/tool/pingTable.vue           | 24 ++++---
 .../components/page/alert/alertMessage.vue    |  5 +-
 .../src/components/page/tool/ping.vue         | 70 +++++++++++++++----
 .../src/components/page/tool/trace.vue        | 70 +++++++++++++++----
 6 files changed, 221 insertions(+), 42 deletions(-)

diff --git a/nezha-fronted/src/assets/css/components/page/tool/ping.scss b/nezha-fronted/src/assets/css/components/page/tool/ping.scss
index 592faf907..044b21297 100644
--- a/nezha-fronted/src/assets/css/components/page/tool/ping.scss
+++ b/nezha-fronted/src/assets/css/components/page/tool/ping.scss
@@ -1,4 +1,38 @@
 .ping{
+  .top-tool-left{
+    // align-items: center;
+  }
+  .ipInput{
+    width:250px;
+    min-height: 36px;
+    max-height: 62px;
+  }
+  .ti-tag-input{
+    background: transparent ;
+  }
+  .vue-tags-input,.ti-new-tag-input {
+    .ti-input {
+      min-height: 36px;
+      max-height: 62px;
+      overflow-y: auto;
+      box-sizing: border-box;
+      border-radius: 2px;
+      border: 1px solid $--button-icon-border-color !important;
+      .ti-tag.ti-valid {
+        background-color: $--value-background-color;
+        color: $--value-color;
+      }
+      .ti-new-tag-input {
+        color: $--color-text-regular !important;
+      }
+      .ti-tags{
+        .ti-tag{
+          word-break: break-all;
+        }
+      }
+    }
+    .ti-input:hover{}
+  }
   .choose{
     width: 50px !important;
     height: 36px !important;
@@ -37,9 +71,14 @@
       background: $--color-primary;
     }
   }
-
+  .main-container{
+    display: flex;
+    flex-direction: column;
+  }
   .nz-table2{
-    height: calc(100% - 64px) !important;
+    height: auto !important;
+    overflow: hidden;
+    flex: 1;
     .empty{
       width: 100%;
       height: 100%;
@@ -47,7 +86,7 @@
       justify-content: center;
       align-items: center;
       .el-steps{
-        width: 620px;
+        width: 600px;
       }
       .el-step__icon{
         width: 64px;
@@ -77,6 +116,7 @@
     }
     .data-wrap{
       height: 100%;
+      overflow: hidden;
       .data-top{
         width: 100%;
         padding-left: 15px;
@@ -95,6 +135,7 @@
       }
       .data-bottom{
         height: calc(100% - 50px) !important;
+        overflow: hidden;
         .details{
           padding: 20px;
         }
diff --git a/nezha-fronted/src/assets/css/components/page/tool/trace.scss b/nezha-fronted/src/assets/css/components/page/tool/trace.scss
index 1e51a79a0..e717af1f8 100644
--- a/nezha-fronted/src/assets/css/components/page/tool/trace.scss
+++ b/nezha-fronted/src/assets/css/components/page/tool/trace.scss
@@ -1,4 +1,38 @@
 .trace{
+  .top-tool-left{
+    // align-items: center;
+  }
+  .ipInput{
+    width:250px;
+    min-height: 36px;
+    max-height: 62px;
+  }
+  .ti-tag-input{
+    background: transparent ;
+  }
+  .vue-tags-input,.ti-new-tag-input {
+    .ti-input {
+      min-height: 36px;
+      max-height: 62px;
+      overflow-y: auto;
+      box-sizing: border-box;
+      border-radius: 2px;
+      border: 1px solid $--button-icon-border-color !important;
+      .ti-tag.ti-valid {
+        background-color: $--value-background-color;
+        color: $--value-color;
+      }
+      .ti-new-tag-input {
+        color: $--color-text-regular !important;
+      }
+      .ti-tags{
+        .ti-tag{
+          word-break: break-all;
+        }
+      }
+    }
+    .ti-input:hover{}
+  }
   .choose{
     width: 50px !important;
     height: 36px !important;
@@ -37,9 +71,14 @@
       background: $--color-primary;
     }
   }
-
+  .main-container{
+    display: flex;
+    flex-direction: column;
+  }
   .nz-table2{
-    height: calc(100% - 64px) !important;
+    height: auto !important;
+    overflow: hidden;
+    flex: 1;
     .empty{
       width: 100%;
       height: 100%;
@@ -47,7 +86,7 @@
       justify-content: center;
       align-items: center;
       .el-steps{
-        width: 620px;
+        width: 600px;
       }
       .el-step__icon{
         width: 64px;
@@ -77,6 +116,7 @@
     }
     .data-wrap{
       height: 100%;
+      overflow: hidden;
       .data-top{
         width: 100%;
         padding-left: 15px;
@@ -95,6 +135,7 @@
       }
       .data-bottom{
         height: calc(100% - 50px) !important;
+        overflow: hidden;
         .details{
           padding: 20px;
         }
diff --git a/nezha-fronted/src/components/common/table/tool/pingTable.vue b/nezha-fronted/src/components/common/table/tool/pingTable.vue
index 2f01f65c4..96292d368 100644
--- a/nezha-fronted/src/components/common/table/tool/pingTable.vue
+++ b/nezha-fronted/src/components/common/table/tool/pingTable.vue
@@ -67,35 +67,43 @@ export default {
         {
           label: this.$t('overall.dc'),
           prop: 'dc',
-          sortable: true
+          sortable: true,
+          minWidth: 200
         }, {
           label: this.$t('ping.sourceIp'),
           prop: 'source',
-          sortable: true
+          sortable: true,
+          minWidth: 200
         }, {
           label: this.$t('ping.targetIp'),
           prop: 'ip',
-          sortable: true
+          sortable: true,
+          minWidth: 200
         }, {
           label: this.$t('overall.state'),
           prop: 'state',
-          sortable: true
+          sortable: true,
+          width: 150
         }, {
           label: this.$t('ping.packetLossRate'),
           prop: 'rate',
-          sortable: true
+          sortable: true,
+          minWidth: 200
         }, {
           label: this.$t('ping.rttAverage'),
           prop: 'avg',
-          sortable: true
+          sortable: true,
+          minWidth: 200
         }, {
           label: this.$t('ping.rttMinimum'),
           prop: 'min',
-          sortable: true
+          sortable: true,
+          minWidth: 200
         }, {
           label: this.$t('ping.rttMaximum'),
           prop: 'max',
-          sortable: true
+          sortable: true,
+          minWidth: 200
         }
       ]
     }
diff --git a/nezha-fronted/src/components/page/alert/alertMessage.vue b/nezha-fronted/src/components/page/alert/alertMessage.vue
index 326d0d473..138d00847 100644
--- a/nezha-fronted/src/components/page/alert/alertMessage.vue
+++ b/nezha-fronted/src/components/page/alert/alertMessage.vue
@@ -18,7 +18,7 @@
         <button id="asset-filter" :class="[dataListLayout.indexOf('clickSearch') > -1?'is-focus':'' ]" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
           <i class="nz-icon nz-icon-funnel"></i>
         </button>
-        <pick-time v-model="searchTime" :sign="sign?sign:'message'" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
+        <pick-time v-model="searchTime" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
         <button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-r-10"
                 type="button" @click="showExportDialog">
           <i class="nz-icon-download1 nz-icon"></i>
@@ -177,7 +177,6 @@ export default {
   mixins: [dataListMixin, routerPathParams],
   data () {
     return {
-      sign:'',
       chartLoading: false,
       chartInfo: {},
       alertMessageNzTableHeightOffset: 242,
@@ -579,8 +578,6 @@ export default {
       })
     },
     messageDetail (row) {
-      this.sign = Number(row.alertRule.id)
-      console.log(this.sign);
       this.$get('/alert/rule/' + row.alertRule.id).then(res => {
         this.currentMsg = { ...row, alertRule: { ...res.data } }
         this.$nextTick(() => {
diff --git a/nezha-fronted/src/components/page/tool/ping.vue b/nezha-fronted/src/components/page/tool/ping.vue
index e48ab629d..16052c5ca 100644
--- a/nezha-fronted/src/components/page/tool/ping.vue
+++ b/nezha-fronted/src/components/page/tool/ping.vue
@@ -5,7 +5,16 @@
       :from="fromRoute.ping"
     >
     <template v-slot:top-tool-left>
-      <el-input v-model="ip" size='medium' style="width:250px" :placeholder="$t('overall.placeHolder')+' IP/Hostname'"></el-input>
+      <vue-tags-input
+        class="ipInput"
+        v-model="ip"
+        :placeholder="$t('overall.placeHolder')+' IP'"
+        :add-from-paste="false"
+        :tags="tags"
+        @tags-changed="newTags => tags = newTags"
+        @before-adding-tag="value => beforeAddTag(value)"
+        @adding-duplicate="value => addDuplicate(value)"
+      />
       <el-popover
         placement="bottom"
         width="220"
@@ -58,7 +67,7 @@
         <el-steps align-center>
           <el-step>
             <span class="nz-icon nz-icon-edit" slot="icon"></span>
-            <p class="txt" slot="title">{{$t('overall.placeHolder')}} IP/Hostname</p>
+            <p class="txt" slot="title">{{$t('overall.placeHolder')}} IP</p>
           </el-step>
           <el-step>
             <span class="el-icon-more" slot="icon"></span>
@@ -73,7 +82,7 @@
       <!-- 存在任务id时展示表格 -->
       <div class="data-wrap" v-show="tid!==undefined">
         <div class="data-top">
-          <span>IP {{$t('ping.total')}}:{{total}}</span>
+          <span>{{$t('asset.total')}}:{{total}}</span>
           <span>{{$t('ping.done')}}:{{done}}</span>
           <span>{{$t('ping.progress')}}:{{process}}%</span>
         </div>
@@ -94,15 +103,20 @@
 </template>
 
 <script>
+import bus from '@/libs/bus'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import pingTable from '@/components/common/table/tool/pingTable'
+import VueTagsInput from '@johmun/vue-tags-input'
 import { positiveInteger } from '../../common/js/validate'
+const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
+const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
 export default {
   mixins: [dataListMixin],
   components: {
     nzDataList,
-    pingTable
+    pingTable,
+    VueTagsInput
   },
   data () {
     return {
@@ -112,6 +126,7 @@ export default {
       // 弹出框是否显示
       visible: false,
       ip: '',
+      tags: [],
       // 是否全选
       checkAll: true,
       isIndeterminate: false,
@@ -146,6 +161,27 @@ export default {
     this.getDataCenter()
   },
   methods: {
+    // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
+    validateHost: bus.debounce(function () {
+      this.$message.error(this.$t('validate.host'))
+    },
+    50),
+    // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
+    validateDuplicate: bus.debounce(function () {
+      this.$message.error(this.$t('ping.duplicate') + ' IP')
+    },
+    50),
+    // 添加标签之前
+    beforeAddTag ({ tag, addTag }) {
+      if (!ipv4.test(tag.text) && !ipv6.test(tag.text)) {
+        return this.validateHost()
+      }
+      addTag()
+    },
+    // 添加重复的标签
+    addDuplicate () {
+      return this.validateDuplicate()
+    },
     close () {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
@@ -177,16 +213,25 @@ export default {
     },
     // 开始任务
     startTask () {
-      const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
-      const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
-      if (!ipv4.test(this.ip) && !ipv6.test(this.ip)) {
-        return this.$message.error(this.$t('validate.host'))
-      }
       if (!this.flag) {
         return false
       }
-      this.flag = false
-      this.getId()
+      setTimeout(() => {
+        if (this.ip) {
+          // 校验ip格式
+          if (!ipv4.test(this.ip) && !ipv6.test(this.ip)) {
+            return this.validateHost()
+          }
+          // 判断ip是否重复
+          if (this.tags.some(item => item.text === this.ip)) {
+            return this.validateDuplicate()
+          }
+        } else if (!this.tags.length) {
+          return this.validateHost()
+        }
+        this.flag = false
+        this.getId()
+      })
     },
     // 请求dataCenter
     getDataCenter () {
@@ -201,8 +246,9 @@ export default {
     // 请求任务id
     async getId () {
       this.loading = true
+      const ipArr = this.tags.map(item => item.text)
       const params = {
-        ip: this.ip,
+        ips: ipArr.join(','),
         dcIds: this.checked.join(','),
         timeout: this.ruleForm.timeout
       }
diff --git a/nezha-fronted/src/components/page/tool/trace.vue b/nezha-fronted/src/components/page/tool/trace.vue
index 7fced0e9d..294afa7c9 100644
--- a/nezha-fronted/src/components/page/tool/trace.vue
+++ b/nezha-fronted/src/components/page/tool/trace.vue
@@ -5,7 +5,16 @@
       :from="fromRoute.trace"
     >
     <template v-slot:top-tool-left>
-      <el-input v-model="ip" size='medium' style="width:250px" :placeholder="$t('overall.placeHolder')+' IP/Hostname'"></el-input>
+      <vue-tags-input
+        class="ipInput"
+        v-model="ip"
+        :placeholder="$t('overall.placeHolder')+' IP'"
+        :add-from-paste="false"
+        :tags="tags"
+        @tags-changed="newTags => tags = newTags"
+        @before-adding-tag="value => beforeAddTag(value)"
+        @adding-duplicate="value => addDuplicate(value)"
+      />
       <el-popover
         placement="bottom"
         width="220"
@@ -64,7 +73,7 @@
         <el-steps align-center>
           <el-step>
             <span class="nz-icon nz-icon-edit" slot="icon"></span>
-            <p class="txt" slot="title">{{$t('overall.placeHolder')}} IP/Hostname</p>
+            <p class="txt" slot="title">{{$t('overall.placeHolder')}}IP</p>
           </el-step>
           <el-step>
             <span class="el-icon-more" slot="icon"></span>
@@ -79,7 +88,7 @@
       <!-- 存在任务id时展示表格 -->
       <div class="data-wrap" v-show="tid!==undefined">
         <div class="data-top">
-          <span>IP {{$t('ping.total')}}:{{total}}</span>
+          <span>{{$t('asset.total')}}:{{total}}</span>
           <span>{{$t('ping.done')}}:{{done}}</span>
           <span>{{$t('ping.progress')}}:{{process}}%</span>
         </div>
@@ -100,15 +109,20 @@
 </template>
 
 <script>
+import bus from '@/libs/bus'
 import nzDataList from '@/components/common/table/nzDataList'
 import dataListMixin from '@/components/common/mixin/dataList'
 import traceTable from '@/components/common/table/tool/traceTable'
+import VueTagsInput from '@johmun/vue-tags-input'
 import { positiveInteger } from '../../common/js/validate'
+const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
+const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
 export default {
   mixins: [dataListMixin],
   components: {
     nzDataList,
-    traceTable
+    traceTable,
+    VueTagsInput
   },
   data () {
     return {
@@ -118,6 +132,7 @@ export default {
       // 弹出框是否显示
       visible: false,
       ip: '',
+      tags: [],
       // 是否全选
       checkAll: true,
       isIndeterminate: false,
@@ -155,6 +170,27 @@ export default {
     this.getDataCenter()
   },
   methods: {
+    // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
+    validateHost: bus.debounce(function () {
+      this.$message.error(this.$t('validate.host'))
+    },
+    50),
+    // 使用防抖是因为,防止标签输入框失去焦点校验和开始任务校验重复(连续两次message提示)
+    validateDuplicate: bus.debounce(function () {
+      this.$message.error(this.$t('ping.duplicate') + ' IP')
+    },
+    50),
+    // 添加标签之前
+    beforeAddTag ({ tag, addTag }) {
+      if (!ipv4.test(tag.text) && !ipv6.test(tag.text)) {
+        return this.validateHost()
+      }
+      addTag()
+    },
+    // 添加重复的标签
+    addDuplicate () {
+      return this.validateDuplicate()
+    },
     close () {
       this.$refs.ruleForm.validate((valid) => {
         if (valid) {
@@ -186,16 +222,25 @@ export default {
     },
     // 开始任务
     startTask () {
-      const ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\:\d{0,5})?$/
-      const ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
-      if (!ipv4.test(this.ip) && !ipv6.test(this.ip)) {
-        return this.$message.error(this.$t('validate.host'))
-      }
       if (!this.flag) {
         return false
       }
-      this.flag = false
-      this.getId()
+      setTimeout(() => {
+        if (this.ip) {
+          // 校验ip格式
+          if (!ipv4.test(this.ip) && !ipv6.test(this.ip)) {
+            return this.validateHost()
+          }
+          // 判断ip是否重复
+          if (this.tags.some(item => item.text === this.ip)) {
+            return this.validateDuplicate()
+          }
+        } else if (!this.tags.length) {
+          return this.validateHost()
+        }
+        this.flag = false
+        this.getId()
+      })
     },
     // 请求dataCenter
     getDataCenter () {
@@ -210,8 +255,9 @@ export default {
     // 请求任务id
     async getId () {
       this.loading = true
+      const ipArr = this.tags.map(item => item.text)
       const params = {
-        ip: this.ip,
+        ips: ipArr.join(','),
         dcIds: this.checked.join(','),
         maxHops: this.ruleForm.maxHops,
         timeout: this.ruleForm.timeout