diff --git a/src/assets/css/components/views/charts/chart.scss b/src/assets/css/components/views/charts/chart.scss
index 4ba81d26..f5acbd3f 100644
--- a/src/assets/css/components/views/charts/chart.scss
+++ b/src/assets/css/components/views/charts/chart.scss
@@ -387,16 +387,30 @@
   position: absolute;
   height: 100%;
   width: 100%;
+  left: 0;
+  top: 0;
   background-color: #fefefe;
   z-index: 1;
   opacity: .8;
 
-  i {
+  img {
     position: absolute;
-    left: calc(50% - 15px);
-    top: calc(50% - 15px);
-    font-size: 30px;
-    color: #aaa;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    &.loading-img--large {
+      height: 30px;
+      width: 30px;
+    }
+    &.loading-img--small {
+      height: 14px;
+      width: 14px;
+    }
+    &.loading-img--default {
+      height: 20px;
+      width: 20px;
+    }
   }
 }
 
diff --git a/src/assets/css/components/views/charts/chartRelationShipList.scss b/src/assets/css/components/views/charts/chartRelationShipList.scss
index dd2c01e4..af9616d4 100644
--- a/src/assets/css/components/views/charts/chartRelationShipList.scss
+++ b/src/assets/css/components/views/charts/chartRelationShipList.scss
@@ -79,12 +79,6 @@
       display: flex;
       width: calc(100% - 20px);
       position: relative;
-      .chart__loading {
-        i.el-icon-loading {
-          font-size: 16px;
-          top: calc(50% - 8.5px);
-        }
-      }
       .ship-body-list-title {
         width: 130px;
         font-size: 14px;
diff --git a/src/assets/css/components/views/entityExplorer/entity-filter.scss b/src/assets/css/components/views/entityExplorer/entity-filter.scss
index 1a2d38c6..75c52581 100644
--- a/src/assets/css/components/views/entityExplorer/entity-filter.scss
+++ b/src/assets/css/components/views/entityExplorer/entity-filter.scss
@@ -63,10 +63,9 @@
           display: inline-block;
           text-align: center;
           flex: 1;
-          .chart__loading i.el-icon-loading {
-            font-size: 18px;
-            top: calc(50% - 10px);
-            left: calc(50% - 8px);
+          .chart__loading img {
+            left: unset;
+            right: 0;
           }
         }
       }
diff --git a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
index 2506f819..cfdf9c75 100644
--- a/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
+++ b/src/assets/css/components/views/entityExplorer/entityList/detail-overview.scss
@@ -265,14 +265,12 @@
       display: flex;
       .overview__tag-loading.overview__tag {
         position: relative;
-        .chart__loading {
-          top: 0;
-          left: 0;
-        }
       }
       .overview__tag {
         display: flex;
-        padding: 6px 15px;
+        padding: 0 15px;
+        height: 31px;
+        align-items: center;
         margin-right: 20px;
         background-color: #EFF6FE;
         font-size: 14px;
diff --git a/src/components/common/Loading.vue b/src/components/common/Loading.vue
index ccf98d85..358f1f11 100644
--- a/src/components/common/Loading.vue
+++ b/src/components/common/Loading.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="chart__loading" v-show="showLoading">
-    <i class="el-icon-loading"></i>
+    <img :class="className" :src="path" alt="" :style="innerStyle">
   </div>
 </template>
 
@@ -8,7 +8,12 @@
 export default {
   name: 'loading',
   props: {
-    loading: Boolean
+    loading: Boolean,
+    size: {
+      type: String,
+      default: 'default' // large default small
+    },
+    innerStyle: String
   },
   data () {
     return {
@@ -31,6 +36,28 @@ export default {
         this.showLoading = n
       }
     }
+  },
+  setup (props) {
+    const path = window.location.protocol + '//' + window.location.host + '/images/loading.gif'
+    let className = ''
+    switch (props.size) {
+      case 'large': {
+        className = 'loading-img--large'
+        break
+      }
+      case 'small': {
+        className = 'loading-img--small'
+        break
+      }
+      default: {
+        className = 'loading-img--default'
+        break
+      }
+    }
+    return {
+      path,
+      className
+    }
   }
 }
 </script>
diff --git a/src/components/entities/EntityDetail.vue b/src/components/entities/EntityDetail.vue
deleted file mode 100644
index d1a9ebce..00000000
--- a/src/components/entities/EntityDetail.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <el-dialog
-      v-model="show"
-      :top="top"
-      :modal="modal"
-      :custom-class="customClass"
-      :show-close="showClose"
-      :width="width"
-      destroy-on-close
-  >
-    <cn-panel :entity="entity" :is-entity-detail="true"></cn-panel>
-  </el-dialog>
-</template>
-
-<script>
-import Panel from '@/views/charts/Panel'
-export default {
-  name: 'EntityDetail',
-  components: {
-    'cn-panel': Panel
-  },
-  props: {
-    showDetail: Boolean,
-    top: {
-      type: String,
-      default: '5vh'
-    },
-    modal: {
-      type: Boolean,
-      default: true
-    },
-    customClass: {
-      type: String,
-      default: 'entity-detail__dialog'
-    },
-    showClose: {
-      type: Boolean,
-      default: true
-    },
-    width: { // 高度需要通过customClass自行定义
-      type: [String, Number],
-      default: '90vw'
-    },
-    entity: Object // 实体，{ type: 'ip|domain|app', name: name, icon: icon-class }
-  },
-  data () {
-    return {
-      show: false
-    }
-  },
-  watch: {
-    showDetail (n, o) {
-      this.show = n
-    },
-    show (n, o) {
-      this.$emit('update:show-detail', n)
-    }
-  }
-}
-</script>
diff --git a/src/components/entities/EntityList.vue b/src/components/entities/EntityList.vue
deleted file mode 100644
index 4da5a0ca..00000000
--- a/src/components/entities/EntityList.vue
+++ /dev/null
@@ -1,367 +0,0 @@
-<template>
-  <div class="entity-list">
-    <div class="entity__loading" v-show="loading">
-      <i class="el-icon-loading"></i>
-    </div>
-    <div class="entity-list__content">
-      <div class="cn-entity" v-for="(d, i) in entityList" :key="i">
-        <div class="cn-entity__header">
-          <div class="header__content" :title="d.ip||d.domainName||d.appName">
-            <div class="header__icon"><i :class="iconClass"></i></div>
-            <template v-if="from === 'ip'">
-              <div class="content__name"  style="top:31px;">
-                {{d.ip || 'Unknown'}}
-              </div>
-            </template>
-            <template v-else-if="from === 'domain'">
-              <div class="content__name" >
-                {{d.domainName || 'Unknown'}}
-              </div>
-              <div class="content__desc" >
-                <span class="desc__label">{{$t('entities.reputationLevel')}}:&nbsp;</span>
-                <span>{{d.reputationLevel || '-'}}</span>
-              </div>
-            </template>
-            <template v-else-if="from === 'app'">
-              <div class="content__name" >
-                {{d.appName || 'Unknown'}}
-              </div>
-              <div class="content__desc" >
-                <span class="desc__label">{{$t('entities.risk')}}:&nbsp;</span>
-                <span>{{d.appRisk || '-'}}</span>
-              </div>
-            </template>
-          </div>
-          <div class="header__bottom__line"></div>
-        </div>
-        <div class="cn-entity__body">
-          <template v-if="from === 'ip'">
-            <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-country" ></i>{{$t('overall.country')}}：</span>
-              <div class="body__row-value" :title="d.country">{{d.country || '-'}}</div>
-            </div>
-            <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-position"></i>{{$t('overall.region')}}：</span>
-              <div class="body__row-value" :title="d.region">{{d.region || '-'}}</div>
-            </div>
-            <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-cloud"></i>{{$t('entities.asn')}}：</span>
-              <div class="body__row-value" :title="d.asn">{{d.asn || '-'}}</div>
-            </div>
-            <!-- 曲线-->
-            <div class="body__drawing-box">
-              <div class="body__drawing" :id="`entityListChart${d.id}`"></div>
-            </div>
-            <div class="body__statics">
-              <div class="entity-statics-down"><i class="cn-icon cn-icon-fall entity-statics-icon" style=""></i>{{d.latestReceived || 0}} bps</div>
-              <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise" style=""></i>{{d.latestSent || 0}} bps</div>
-              <div class="body__detail" @click="entityDetail({ip: d.ip, type: 4})">{{$t('overall.detail')}}></div>
-            </div>
-          </template>
-          <template v-else-if="from === 'domain'">
-            <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-category"></i>{{$t('entities.group')}}：</span>
-              <div class="body__row-value" :title="d.categoryGroup">{{d.categoryGroup || '-'}}</div>
-            </div>
-            <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-sub-category"></i>{{$t('entities.categoryName')}}：</span>
-              <div class="body__row-value" :title="d.categoryName">{{d.categoryName || '-'}}</div>
-            </div>
-            <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-credit"></i>{{$t('entities.credit')}}：</span>
-              <div class="body__row-value" :title="d.reputationScore">{{d.reputationScore || '-'}}</div>
-            </div>
-            <!-- 曲线-->
-            <div class="body__drawing-box">
-              <div class="body__drawing" :id="`entityListChart${d.id}`"></div>
-            </div>
-            <div class="body__statics">
-              <div class="entity-statics-down" style=" "><i class="cn-icon cn-icon-fall entity-statics-icon" style=""></i>{{d.latestReceived || 0}} bps</div>
-              <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise" style=""></i>{{d.latestSent || 0}} bps</div>
-              <div class="body__detail" @click="entityDetail({domain: d.domainName, type: 5})">{{$t('overall.detail')}}></div>
-            </div>
-          </template>
-          <template v-else-if="from === 'app'">
-            <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-id"></i>APP：</span>
-              <div class="body__row-value" :title="d.appId">{{d.appId || '-'}}</div>
-            </div>
-            <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-category"></i>{{$t('entities.category')}}：</span>
-              <div class="body__row-value" :title="d.appCategory">{{d.appCategory || '-'}}</div>
-            </div>
-            <div class="body__row">
-              <span class="body__row-label"><i class="cn-icon cn-icon-sub-category"></i>{{$t('entities.subcategory')}}：</span>
-              <div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</div>
-            </div>
-            <!-- 曲线-->
-            <div class="body__drawing-box">
-              <div class="body__drawing" :id="`entityListChart${d.id}`"></div>
-            </div>
-            <div class="body__statics">
-              <div class="entity-statics-down" style=" "><i class="cn-icon cn-icon-fall entity-statics-icon" style=""></i>{{d.latestReceived || 0}} bps</div>
-              <div class="entity-statics-up" ><i class="cn-icon cn-icon-rise" style=""></i>{{d.latestSent || 0}} bps</div>
-              <div class="body__detail" @click="entityDetail({app: d.appName, type: 6})">{{$t('overall.detail')}}></div>
-            </div>
-          </template>
-        </div>
-      </div>
-    </div>
-    <div class="entity-list__pagination">
-      <el-pagination
-              @size-change="size"
-              @prev-click="prev"
-              @next-click="next"
-              @current-change="current"
-              :currentPage="pageObj.pageNo"
-              :page-size="pageObj.pageSize"
-              :total="pageObj.total"
-              layout="total, prev, pager, next"
-      ></el-pagination>
-    </div>
-  </div>
-</template>
-
-<script>
-import { get } from '@/utils/http'
-import { api } from '@/utils/api'
-import * as echarts from 'echarts'
-import { entityListLineOption } from '@/views/charts/charts/chart-options'
-import { getChartColor } from '@/views/charts/charts/tools'
-import { legendMapping } from '@/views/charts/charts/chart-table-title'
-import unitConvert from '@/utils/unit-convert'
-import { unitTypes } from '@/utils/constants'
-
-export default {
-  name: 'EntityList',
-  props: {
-    listData: Array,
-    from: String,
-    pageObj: Object,
-    loading: Boolean
-  },
-  data () {
-    return {
-      showDetail: false,
-      typeName: '',
-      entityList: []
-    }
-  },
-  computed: {
-    circleColor () {
-      let color
-      switch (this.from) {
-        case ('ip'): {
-          color = '#E8FBF9'
-          break
-        }
-        case ('domain'): {
-          color = '#EEF6FE'
-          break
-        }
-        case ('app'): {
-          color = '#FEF7E7'
-          break
-        }
-        default: break
-      }
-      return color
-    },
-    iconClass () {
-      let className
-      switch (this.from) {
-        case ('ip'): {
-          className = 'cn-icon cn-icon-ip2 ip-green'
-          break
-        }
-        case ('domain'): {
-          className = 'cn-icon cn-icon-domain2 domain-blue'
-          break
-        }
-        case ('app'): {
-          className = 'cn-icon cn-icon-app2 app-orange'
-          break
-        }
-        default: break
-      }
-      return className
-    }
-  },
-  methods: {
-    size (val) {
-      this.$emit('pageSize', val)
-    },
-    // 点击上一页箭头
-    prev () {
-      this.scrollbarToTop()
-    },
-    // 点击下一页箭头
-    next () {
-      this.scrollbarToTop()
-    },
-    // currentPage 改变时会触发
-    current (val) {
-      this.$emit('pageNo', val)
-      this.scrollbarToTop()
-    },
-    scrollbarToTop () {
-      this.$nextTick(() => {
-        const wraps = document.querySelectorAll('.el-table__body-wrapper')
-        wraps.scrollTop = 0
-      })
-    },
-    entityDetail (params) {
-      this.$emit('showDetail', { ...params, icon: this.iconClass })
-    }
-  },
-  setup () {
-    return {
-      chartOption: entityListLineOption
-    }
-  },
-  watch: {
-    listData: {
-      deep: true,
-      immediate: true,
-      handler (n, o) {
-        if (!this.$_.isEmpty(n) && !this.$_.isEqual(n, o)) {
-          this.entityList = []
-          setTimeout(() => {
-            const now = window.$dayJs.tz().valueOf()
-            const queryParams = { startTime: Math.floor(now / 1000 - 3600), endTime: Math.floor(now / 1000) }
-            switch (this.from) {
-              case ('ip'): {
-                n.forEach(data => {
-                  const entity = { ...data }
-                  let chartOption
-                  get(api.ipThroughput, { ...queryParams, ip: entity.ip }).then(response => {
-                    if (response.code === 200) {
-                      const seriesTemplate = this.chartOption.series[0]
-                      const series = response.data.result.filter(r => r.legend !== 'bytes_rate').map((r, i) => {
-                        if (r.legend === 'bytes_sent_rate') {
-                          entity.latestSent = unitConvert(r.values[r.values.length - 1][1], unitTypes.byte)[0]
-                        } else if (r.legend === 'bytes_received_rate') {
-                          entity.latestReceived = unitConvert(r.values[r.values.length - 1][1], unitTypes.byte)[0]
-                        }
-                        return {
-                          ...seriesTemplate,
-                          name: legendMapping[`ip_${r.legend}`],
-                          data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
-                          itemStyle: {
-                            normal: {
-                              color: getChartColor(i),
-                              lineStyle: {
-                                width: 2
-                              }
-                            }
-                          }
-                        }
-                      })
-                      chartOption = {
-                        ...this.chartOption,
-                        series
-                      }
-                    }
-                  }).finally(() => {
-                    this.entityList.push(entity)
-                    this.$nextTick(() => {
-                      const myChart = echarts.init(document.getElementById(`entityListChart${entity.id}`))
-                      myChart.setOption(chartOption)
-                    })
-                  })
-                })
-                break
-              }
-              case ('domain'): {
-                n.forEach(data => {
-                  const entity = { ...data }
-                  let chartOption
-                  get(api.domainThroughput, { ...queryParams, domain: entity.domainName }).then(response => {
-                    if (response.code === 200) {
-                      const seriesTemplate = this.chartOption.series[0]
-                      const series = response.data.result.filter(r => r.legend !== 'bytes_rate').map((r, i) => {
-                        if (r.legend === 'bytes_sent_rate') {
-                          entity.latestSent = unitConvert(r.values[r.values.length - 1][1], unitTypes.byte)[0]
-                        } else if (r.legend === 'bytes_received_rate') {
-                          entity.latestReceived = unitConvert(r.values[r.values.length - 1][1], unitTypes.byte)[0]
-                        }
-                        return {
-                          ...seriesTemplate,
-                          name: legendMapping[r.legend],
-                          data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
-                          itemStyle: {
-                            normal: {
-                              color: getChartColor(i),
-                              lineStyle: {
-                                width: 2
-                              }
-                            }
-                          }
-                        }
-                      })
-                      chartOption = {
-                        ...this.chartOption,
-                        series
-                      }
-                    }
-                  }).finally(() => {
-                    this.entityList.push(entity)
-                    this.$nextTick(() => {
-                      const myChart = echarts.init(document.getElementById(`entityListChart${entity.id}`))
-                      myChart.setOption(chartOption)
-                    })
-                  })
-                })
-                break
-              }
-              case ('app'): {
-                n.forEach(data => {
-                  const entity = { ...data }
-                  let chartOption
-                  get(api.appThroughput, { ...queryParams, app: entity.appName }).then(response => {
-                    if (response.code === 200) {
-                      const seriesTemplate = this.chartOption.series[0]
-                      const series = response.data.result.filter(r => r.legend !== 'bytes_rate').map((r, i) => {
-                        if (r.legend === 'bytes_sent_rate') {
-                          entity.latestSent = unitConvert(r.values[r.values.length - 1][1], unitTypes.byte)[0]
-                        } else if (r.legend === 'bytes_received_rate') {
-                          entity.latestReceived = unitConvert(r.values[r.values.length - 1][1], unitTypes.byte)[0]
-                        }
-                        return {
-                          ...seriesTemplate,
-                          name: legendMapping[r.legend],
-                          data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), unitTypes.byte]),
-                          itemStyle: {
-                            normal: {
-                              color: getChartColor(i),
-                              lineStyle: {
-                                width: 2
-                              }
-                            }
-                          }
-                        }
-                      })
-                      chartOption = {
-                        ...this.chartOption,
-                        series
-                      }
-                    }
-                  }).finally(() => {
-                    this.entityList.push(entity)
-                    this.$nextTick(() => {
-                      const myChart = echarts.init(document.getElementById(`entityListChart${entity.id}`))
-                      myChart.setOption(chartOption)
-                    })
-                  })
-                })
-                break
-              }
-              default: break
-            }
-          }, 1000)
-        }
-      }
-    }
-  }
-}
-</script>
diff --git a/src/components/entities/LeftFilter.vue b/src/components/entities/LeftFilter.vue
deleted file mode 100644
index 868b3654..00000000
--- a/src/components/entities/LeftFilter.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div class="entity-left-filter">
-    <div class="filter__header">{{$t('entities.filter')}}</div>
-    <div class="filter__body">
-      <el-collapse v-model="active" class="filter__collapse">
-        <el-collapse-item
-            name="0"
-        >
-          <template #title>
-            <div class="collapse-header"><i :class="topFilterData.icon" class="collapse-header__icon"></i><span>{{topFilterData.title}}</span></div>
-          </template>
-          <el-tree
-              :data="topFilterData.data"
-              :props="{ isLeaf: 'leaf' }"
-              :expand-on-click-node="false"
-              :load="loadLevel2"
-              lazy
-              node-key="name"
-              ref="tree-0"
-              highlight-current
-              @node-click="(data, node, component) => nodeClick(data, node, component, 0)"
-          >
-            <template #default="{ node, data }">
-              <div class="filter-item">
-                <div>{{data.name}}</div>
-                <span>{{data.count}}</span>
-              </div>
-            </template>
-          </el-tree>
-          <div class="filter__more" :class="{'filter__more--disabled': topFilterData.hasnotMore}" @click="showMore(topFilterData)">{{$t('overall.showMore')}}</div>
-        </el-collapse-item>
-        <el-collapse-item
-            name="1"
-        >
-          <template #title>
-            <div class="collapse-header"><i :class="bottomFilterData.icon" class="collapse-header__icon"></i><span>{{bottomFilterData.title}}</span></div>
-          </template>
-          <el-tree
-              :data="bottomFilterData.data"
-              :props="{ isLeaf: 'leaf' }"
-              :expand-on-click-node="false"
-              node-key="name"
-              ref="tree-1"
-              highlight-current
-              @node-click="(data, node, component) => nodeClick(data, node, component, 1)"
-          >
-            <template #default="{ node, data }">
-              <div class="filter-item">
-                <div>{{data.name}}</div>
-                <span>{{data.count}}</span>
-              </div>
-            </template>
-          </el-tree>
-          <div class="filter__more" :class="{'filter__more--disabled': bottomFilterData.hasnotMore}" @click="showMore(bottomFilterData)">{{$t('overall.showMore')}}</div>
-        </el-collapse-item>
-      </el-collapse>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'LeftFilter',
-  props: {
-    topFilterData: Object,
-    bottomFilterData: Object
-  },
-  data () {
-    return {
-      active: ['0', '1'],
-      currentDataTop: null,
-      currentDataBottom: null
-    }
-  },
-  methods: {
-    async loadLevel2 (node, resolve) {
-      resolve(await this.$parent.loadLevel2FilterData(node, this.topFilterData.column))
-    },
-    nodeClick (data, node, component, index) {
-      const currentData = index === 0 ? this.currentDataTop : this.currentDataBottom
-      const column = index === 0 ? this.topFilterData.column : this.bottomFilterData.column
-      if (this.dataEqual(currentData, data)) {
-        node.isCurrent = false
-      }
-      if (index === 0) {
-        this.currentDataTop = this.$_.cloneDeep(data)
-      } else {
-        this.currentDataBottom = this.$_.cloneDeep(data)
-      }
-      this.$emit('select', data, node, index, column)
-    },
-    showMore (filterData) {
-      if (!filterData.hasnotMore) {
-        this.$emit('showMore', filterData.column)
-      }
-    },
-    dataEqual (obj1, obj2) {
-      if (!obj1 || !obj2) {
-        return false
-      }
-      let equal = true
-      this.$_.forIn(obj1, (value, key) => {
-        if (value !== obj2[key]) {
-          equal = false
-        }
-      })
-      return equal
-    }
-  }
-}
-</script>
diff --git a/src/views/charts/charts/PieTable.vue b/src/views/charts/charts/PieTable.vue
index 2615da28..29ccc0b7 100644
--- a/src/views/charts/charts/PieTable.vue
+++ b/src/views/charts/charts/PieTable.vue
@@ -14,9 +14,7 @@
     <el-table-column type="expand" min-width="5%">
       <template #default="props">
         <div style="position: relative">
-          <div class="chart__loading" style="top: 0; height: 100%; z-index: 1;" v-show="loading">
-            <i class="el-icon-loading"></i>
-          </div>
+          <loading :loading="loading"></loading>
           <el-table
               tooltip-effect="light"
               class="expand-table"
@@ -88,6 +86,7 @@ import unitConvert from '@/utils/unit-convert'
 import { get } from '@/utils/http'
 import { replaceUrlPlaceholder } from '@/utils/tools'
 import { unitTypes, riskLevelMapping } from '@/utils/constants'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'PieTable',
@@ -97,6 +96,9 @@ export default {
     order: String,
     timeFilter: Object
   },
+  components: {
+    Loading
+  },
   watch: {
     tableData: {
       deep: true,
diff --git a/src/views/entityExplorer/EntityFilter.vue b/src/views/entityExplorer/EntityFilter.vue
index 973cb03f..203e78f9 100644
--- a/src/views/entityExplorer/EntityFilter.vue
+++ b/src/views/entityExplorer/EntityFilter.vue
@@ -18,7 +18,7 @@
                   <span>{{item.label}}</span>
                 </div>
                 <div class="row__value">
-                  <loading :loading="loadingLeft"></loading>
+                  <loading :loading="loadingLeft" size="small"></loading>
                   <span>{{item.value}}</span>
                 </div>
               </div>
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import EntityTop from '@/components/entities/EntityTop'
+import EntityTop from '@/views/entityExplorer/EntityTop'
 import { get } from '@/utils/http'
 import { api } from '@/utils/api'
 import Loading from '@/components/common/Loading'
diff --git a/src/components/entities/EntityTop.vue b/src/views/entityExplorer/EntityTop.vue
similarity index 100%
rename from src/components/entities/EntityTop.vue
rename to src/views/entityExplorer/EntityTop.vue
diff --git a/src/views/entityExplorer/entityList/EntityList.vue b/src/views/entityExplorer/entityList/EntityList.vue
index 99fdaf68..db98742e 100644
--- a/src/views/entityExplorer/entityList/EntityList.vue
+++ b/src/views/entityExplorer/entityList/EntityList.vue
@@ -1,8 +1,6 @@
 <template>
   <div class="entity-list" id="entityList">
-    <div class="entity__loading" style="background: #eff2f5;opacity: .6;" v-show="loading">
-      <i class="el-icon-loading"></i>
-    </div>
+    <loading :loading="loading"></loading>
     <div class="entity-list__content">
       <!-- 列表式 -->
       <template v-if="listMode === 'list'">
@@ -42,6 +40,7 @@
 <script>
 import Card from '@/views/entityExplorer/entityList/Card'
 import Row from '@/views/entityExplorer/entityList/Row'
+import Loading from '@/components/common/Loading'
 
 export default {
   name: 'EntityList',
@@ -55,7 +54,8 @@ export default {
   },
   components: {
     'entity-card': Card,
-    'entity-row': Row
+    'entity-row': Row,
+    Loading
   },
   data () {
     return {
diff --git a/src/views/entityExplorer/entityList/Row.vue b/src/views/entityExplorer/entityList/Row.vue
index c0dc0bb3..5a0fb639 100644
--- a/src/views/entityExplorer/entityList/Row.vue
+++ b/src/views/entityExplorer/entityList/Row.vue
@@ -100,7 +100,7 @@
                   }}</span>
                   <!-- 曲线-->
                   <div class="item-box-loading">
-                    <loading :loading="loading"></loading>
+                    <loading :loading="loading" size="small"></loading>
                     <div
                         class="row__charts"
                         :id="`entityDetailSend${entityType}${listMode}`"
@@ -138,7 +138,7 @@
                   }}</span>
 
                   <div class="item-box-loading">
-                    <loading :loading="loading"></loading>
+                    <loading :loading="loading" size="small"></loading>
                     <div
                       class="row__charts"
                       :id="`entityDetailReceived${entityType}${listMode}`"
diff --git a/src/views/entityExplorer/entityList/detailOverview/Ip.vue b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
index 5cf479ca..2863d311 100644
--- a/src/views/entityExplorer/entityList/detailOverview/Ip.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Ip.vue
@@ -15,7 +15,7 @@
   <div class="overview-item" v-if="entityData.dnsServerRole">
     <div class="overview__title">{{$t('overall.dnsServerInfo')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingDns"></loading>
+      <loading :loading="loadingDns" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.dnsServerInfo.role')}}</div>
         <div class="row__content">{{$_.get(entityData, 'dnsServerRole') || '-'}}</div>
@@ -43,7 +43,7 @@
             <div class="row__charts-msg">{{unitConvert(entityData.queryRate, unitTypes.byte).join(' ')}}ps</div>
             <!-- 曲线-->
             <div class="row__content-loading">
-              <loading :loading="loading"></loading>
+              <loading :loading="!loadingDns && loading" size="small"></loading>
               <div class="row__charts" :id="`entityDnsServerInfo${entityData.ipAddr}`"></div>
             </div>
           </div>
@@ -54,7 +54,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.traffic')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingTraffic"></loading>
+      <loading :loading="loadingTraffic" size="small" inner-style="left: 8.75rem;" style="width: 50%;"></loading>
       <div class="overview__row">
         <div class="row__label row__label--width130">{{$t('overall.peak')}}</div>
         <div class="row__content">{{unitConvert(entityData.max, unitTypes.byte).join(' ')}}/s</div>
@@ -89,7 +89,7 @@
     <div class="overview__content domain__content">
       <div class="overview__tags domain__tags" ref="relationship">
         <div class="overview__domain-tabs overview__domain-tabs-loading">
-          <loading :loading="loadingRelationshipOne"></loading>
+          <loading :loading="loadingRelationshipOne" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
           <div class="overview__domain-tab">
             <div class="overview__tag domain__tag">
               <span class="tag__value">{{relationshipDataOne.length}}</span>
@@ -109,7 +109,7 @@
           </div>
         </div>
         <div class="overview__domain-tabs overview__domain-tabs-loading">
-          <loading :loading="loadingRelationshipTwo"></loading>
+          <loading :loading="loadingRelationshipTwo" size="small" inner-style="left: 1rem;" style="width: 50%;"></loading>
           <div class="overview__domain-tab">
             <div class="overview__tag domain__tag">
               <span class="tag__value">{{relationshipDataTwo.length}}</span>
@@ -134,7 +134,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.networkQuality')}}</div>
     <div class="overview__content overview__content-loading-net">
-      <loading :loading="loadingNetworkQuality"></loading>
+      <loading :loading="loadingNetworkQuality" size="small"></loading>
       <div class="overview__row overview__row--single-value">
         <chart-single-value
             v-for="(chartInfo, i) in singleValues.chartInfos"
@@ -151,14 +151,14 @@
     <div class="overview__content">
       <div class="overview__tags">
         <div class="overview__tag overview__tag-loading">
-          <loading :loading="loadingOut"></loading>
+          <loading :loading="loadingOut" size="small"></loading>
           <span class="tag__desc">{{$t('entities.outLinkTrafficPercentage')}}</span>
           <span class="tag__value">{{entityData.linkOutId ? entityData.linkOutId : '-'}},&nbsp;</span>
           <span class="tag__desc">{{$t('entities.percentage')}}</span>
           <span class="tag__value">{{entityData.linkOutPercent ? unitConvert(entityData.linkOutPercent, unitTypes.percent).join(' ') : '-'}}</span>
         </div>
         <div class="overview__tag overview__tag-loading">
-          <loading :loading="loadingIn"></loading>
+          <loading :loading="loadingIn" size="small"></loading>
           <span class="tag__desc">{{$t('entities.inLinkTrafficPercentage')}}</span>
           <span class="tag__value">{{entityData.linkInId ? entityData.linkInId : '-'}},&nbsp;</span>
           <span class="tag__desc">{{$t('entities.percentage')}}</span>
@@ -170,7 +170,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('overall.alert')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingAlert"></loading>
+      <loading :loading="loadingAlert" size="small" inner-style="left: 10rem"></loading>
       <div class="overview__row" v-if="performanceData.length === 0">
         <span  class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
       </div>
@@ -194,7 +194,7 @@
   <div class="overview-item">
     <div class="overview__title">{{$t('entities.securityEvents')}}</div>
     <div class="overview__content overview__content-loading">
-      <loading :loading="loadingSecurityEvents"></loading>
+      <loading :loading="loadingSecurityEvents" size="small" inner-style="left: 10rem"></loading>
       <div class="overview__row" v-if="securityData.length === 0">
         <span class="no-recent-alerts"><i class="el-icon-success"></i>{{$t('relationShip.noRecentAlerts')}}</span>
       </div>