diff --git a/nezha-fronted/src/assets/css/common/checkbox.scss b/nezha-fronted/src/assets/css/common/checkbox.scss
index 7bf2ac711..30f0d6d90 100644
--- a/nezha-fronted/src/assets/css/common/checkbox.scss
+++ b/nezha-fronted/src/assets/css/common/checkbox.scss
@@ -10,7 +10,7 @@
 .el-checkbox__inner {
   width: 16px !important;
   height: 16px !important;
-  background-color: $--checkbox-background-color !important;
+  // background-color: $--checkbox-background-color !important;
 }
 .el-checkbox__inner::after {
   top: 2px;
diff --git a/nezha-fronted/src/assets/css/components/index.scss b/nezha-fronted/src/assets/css/components/index.scss
index 58b86386d..802f02b95 100644
--- a/nezha-fronted/src/assets/css/components/index.scss
+++ b/nezha-fronted/src/assets/css/components/index.scss
@@ -98,6 +98,7 @@
 @import './page/dashboard/chartBox.scss';
 @import './page/dashboard/panel.scss';
 @import './page/monitor/project/project.scss';
+@import './page/tool/ping.scss';
 
 @import './common/v-selectpagenew/selectpage.scss';
 @import './common/paramBpx/paramBox.scss';
diff --git a/nezha-fronted/src/assets/css/components/page/tool/ping.scss b/nezha-fronted/src/assets/css/components/page/tool/ping.scss
new file mode 100644
index 000000000..592faf907
--- /dev/null
+++ b/nezha-fronted/src/assets/css/components/page/tool/ping.scss
@@ -0,0 +1,125 @@
+.ping{
+  .choose{
+    width: 50px !important;
+    height: 36px !important;
+    line-height: 36px !important;
+    padding: 0 !important;
+    border-radius: 2px 0px 0px 2px !important;
+    border-right: none !important;
+    span{
+      display: flex;
+      align-content: center;
+      justify-content: center;
+    }
+    i{
+      font-size: 20px !important;
+    }
+  }
+  .btn{
+    width: 50px !important;
+    height: 36px !important;
+    line-height: 36px !important;
+    padding: 0 !important;
+    border-radius: 0px 2px 2px 0px !important;
+    span{
+      display: flex;
+      align-content: center;
+      justify-content: center;
+    }
+    i{
+      font-size: 22px !important;
+      color: $--color-primary !important;
+    }
+    i.quadrate{
+      display: inline-block;
+      width: 12px;
+      height: 12px;
+      background: $--color-primary;
+    }
+  }
+
+  .nz-table2{
+    height: calc(100% - 64px) !important;
+    .empty{
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .el-steps{
+        width: 620px;
+      }
+      .el-step__icon{
+        width: 64px;
+        height: 64px;
+        border: 1px solid $--border-color-light;
+        background-color: $--background-color-empty;
+      }
+      .el-step__line{
+        top: 32px;
+        height: 1px;
+      }
+      span{
+        color: #BEBEBE;
+      }
+      .nz-icon-edit{
+        font-size: 26px;
+      } 
+      .el-icon-more{
+        font-size: 22px;
+      }
+      .msg{
+        font-size: 18px;
+      }
+      .txt{
+        color: $--color-text-regular;
+      }
+    }
+    .data-wrap{
+      height: 100%;
+      .data-top{
+        width: 100%;
+        padding-left: 15px;
+        box-sizing: border-box;
+        height: 36px;
+        line-height: 36px;
+        border: 1px solid $--border-color-light;
+        margin-bottom: 14px;
+        span{
+          color: $--color-text-primary;
+          margin-right: 30px;
+          font-size: 14px;
+          font-weight: 500;
+          font-weight: bold;
+        }
+      }
+      .data-bottom{
+        height: calc(100% - 50px) !important;
+        .details{
+          padding: 20px;
+        }
+      }
+    }
+  }
+}
+
+.wrap{
+  .el-input,.el-input__inner{
+    height: 100%;
+  }
+  .el-input-group__append{
+    color: $--color-text-primary;
+  }
+}
+.pop-tit{
+  font-size: 14px;
+  color: $--color-text-primary;
+  line-height: 40px;
+}
+.pop-list-wrap{
+  border: 1px solid $--button-light-border-color !important;
+}
+.pop-list{
+  max-height: 144px;
+  overflow-y: auto;
+}
\ No newline at end of file
diff --git a/nezha-fronted/src/components/common/js/constants.js b/nezha-fronted/src/components/common/js/constants.js
index 12728adf0..9e1212558 100644
--- a/nezha-fronted/src/components/common/js/constants.js
+++ b/nezha-fronted/src/components/common/js/constants.js
@@ -367,7 +367,8 @@ export const fromRoute = {
   link: 'link',
   ipam: 'ipam',
   apiKey: 'apiKey',
-  chartTemp: 'chartTemp'
+  chartTemp: 'chartTemp',
+  ping: 'ping'
 }
 
 export const chartdatasource = [
diff --git a/nezha-fronted/src/components/common/table/settings/pingTable.vue b/nezha-fronted/src/components/common/table/settings/pingTable.vue
new file mode 100644
index 000000000..f0be62ad3
--- /dev/null
+++ b/nezha-fronted/src/components/common/table/settings/pingTable.vue
@@ -0,0 +1,94 @@
+<template>
+  <el-table
+      id="pingTable"
+      ref="dataTable"
+      :height="height"
+      :data="tableData"
+      border
+      @header-dragend="dragend"
+    >
+    <el-table-column type="expand">
+      <template slot-scope="{ row }">
+        <div class="details">
+          <pre>{{row.raw}}</pre>
+        </div>
+      </template>
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      :key="`col-${index}`"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </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>
+        </template>
+        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+        <span v-else>-</span>
+      </template>
+    </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'pingTable',
+  mixins: [table],
+  props: {
+    loading: Boolean
+  },
+  data () {
+    return {
+      tableTitle: [ // 原table列
+        {
+          label: this.$t('overall.dc'),
+          prop: 'dataCenter'
+        }, {
+          label: this.$t('ping.sourceIp'),
+          prop: 'source'
+        }, {
+          label: this.$t('ping.targetIp'),
+          prop: 'ip'
+        }, {
+          label: this.$t('overall.state'),
+          prop: 'state'
+        }, {
+          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'
+        }
+      ]
+    }
+  },
+  methods: {
+  }
+}
+</script>
diff --git a/nezha-fronted/src/components/page/tool/ping.vue b/nezha-fronted/src/components/page/tool/ping.vue
new file mode 100644
index 000000000..ed9bc0c9d
--- /dev/null
+++ b/nezha-fronted/src/components/page/tool/ping.vue
@@ -0,0 +1,256 @@
+<template>
+    <nz-data-list
+      ref="dataList"
+      :layout="[]"
+      :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-popover
+        placement="bottom"
+        width="220"
+        trigger="manual"
+        v-model="visible"
+        v-clickoutside="close"
+        popper-class="no-style-class"
+        >
+        <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>
+            <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>
+              </li>
+              <ul class="pop-list">
+                <el-checkbox-group v-model="checked" @change="checkedChange">
+                  <li class="el-dropdown-menu__item" v-for="item in dataCenter" :key="item.id">
+                    <el-checkbox :label="item.id">{{item.name}}</el-checkbox>
+                  </li>
+                </el-checkbox-group>
+              </ul>
+            </ul>
+          </el-form-item>
+          <el-form-item prop="timeout" style="margin-bottom:10px">
+            <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>
+              </el-input>
+            </div>
+          </el-form-item>
+        </el-form>
+        <el-button slot="reference" class="top-tool-btn margin-l-10 choose" @click="triggerVisible">
+          <i class="el-icon-more"></i>
+        </el-button>
+      </el-popover>
+
+      <el-button class="top-tool-btn btn" v-if="!flag" @click="startTask">
+        <i class="el-icon-caret-right"></i>
+      </el-button>
+      <el-button class="top-tool-btn btn" v-else @click="clearTask">
+        <i class="quadrate"></i>
+      </el-button>
+    </template>
+
+    <template v-slot:default>
+      <!-- 初始展示的内容 ip输入框聚焦后消失 -->
+      <div class="empty" v-if="!ipFocus">
+        <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>
+          </el-step>
+          <el-step>
+            <span class="el-icon-more" slot="icon"></span>
+            <p class="txt" slot="title">{{$t('ping.filter')}}</p>
+          </el-step>
+          <el-step>
+            <span class="msg" slot="icon">Ping</span>
+            <p class="txt" slot="title">Ping {{$t('config.terminallog.cmd.cmd')}}</p>
+          </el-step>
+        </el-steps>
+      </div>
+      <!-- 存在任务id时展示表格 -->
+      <div class="data-wrap" v-show="tid">
+        <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>
+        </div>
+        <div class="data-bottom">
+          <ping-table
+            ref="dataTable"
+            :loading="loading"
+            v-my-loading="loading"
+            :custom-table-title="tools.customTableTitle"
+            :height="mainTableHeight"
+            :table-data="tableData"
+            >
+          </ping-table>
+        </div>
+      </div>
+    </template>
+  </nz-data-list>
+</template>
+
+<script>
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import pingTable from '@/components/common/table/settings/pingTable'
+import { positiveInteger } from '../../common/js/validate'
+export default {
+  mixins: [dataListMixin],
+  components: {
+    nzDataList,
+    pingTable
+  },
+  data () {
+    return {
+      loading: false,
+      // 弹出框是否显示
+      visible: false,
+      ip: '',
+      // ip输入框是否聚焦
+      ipFocus: false,
+      // 是否全选
+      checkAll: true,
+      isIndeterminate: false,
+      // 数据中心
+      dataCenter: [],
+      // 复选框选中的值
+      checked: [],
+      // 是否正在请求数据
+      flag: false,
+      // 定时器id
+      timer: null,
+      // 任务id
+      tid: 0,
+      // 表格总数据
+      total: 0,
+      // 表格数据
+      tableData: [],
+      ruleForm: {
+        // 超时时间
+        timeout: ''
+      },
+      formRules: {
+        timeout: [{ validator: positiveInteger, trigger: 'blur' }]
+      }
+    }
+  },
+  created () {
+    this.getDataCenter()
+  },
+  methods: {
+    close () {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.visible = false
+        }
+      })
+    },
+    // 切换弹框显示隐藏
+    triggerVisible () {
+      if (!this.visible) {
+        this.visible = true
+      } else {
+        this.close()
+      }
+    },
+    // 点击全选
+    checkAllChange (value) {
+      const allId = this.dataCenter.map(item => {
+        return item.id
+      })
+      this.checked = value ? allId : []
+      this.isIndeterminate = false
+    },
+    // 点击单个选中
+    checkedChange (value) {
+      const checkedCount = value.length
+      this.checkAll = checkedCount === this.dataCenter.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.dataCenter.length
+    },
+    // 开始任务
+    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.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+      // 标记正在请求中
+      this.flag = true
+      this.getId()
+    },
+    // 请求dataCenter
+    getDataCenter () {
+      this.$get('/dc?pageSize=-1').then(response => {
+        this.dataCenter = response.data.list
+        // 默认全选
+        this.checked = this.dataCenter.map(item => {
+          return item.id
+        })
+      })
+    },
+    // 请求任务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.timer = setInterval(() => {
+          if (this.tableData.length < this.total) {
+            this.getData()
+          } else {
+            this.clearTask()
+          }
+        }, 1000)
+      })
+    },
+    // 请求表格数据
+    getData () {
+      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'
+        })
+      })
+    },
+    // 清除任务
+    async clearTask () {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+      await this.$get('/tool/ping/cancel/' + this.tid)
+      this.flag = false
+    }
+  },
+  // 离开页面的时候触发
+  async beforeRouteLeave (to, from, next) {
+    await this.clearTask()
+    next()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/nezha-fronted/src/router/index.js b/nezha-fronted/src/router/index.js
index 689e1eb13..778fd1e9a 100644
--- a/nezha-fronted/src/router/index.js
+++ b/nezha-fronted/src/router/index.js
@@ -193,6 +193,10 @@ export default new Router({
         {
           path: '/chartTemp',
           component: resolve => require(['../components/page/config/template/chartTemp.vue'], resolve)
+        },
+        {
+          path: '/ping',
+          component: resolve => require(['../components/page/tool/ping.vue'], resolve)
         }
       ]
     }