perf: loading更改

2022-05-26 17:14:00 +08:00
parent f2d2e19526
commit fc58beacf5
14 changed files with 77 additions and 581 deletions
--- 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'
--- a/src/views/entityExplorer/EntityTop.vue
+++ b/src/views/entityExplorer/EntityTop.vue
@@ -0,0 +1,113 @@
+<template >
+  <div class="entity-pop-custom" v-ele-click-outside="esc">
+    <div class="pop-title">
+      <div>
+        <i :class="itemData.icon"></i>
+        <span>{{itemData.label}}</span>
+      </div>
+    </div>
+<!--    <button @click="esc" class="el-dialog__headerbtn" type="button"><i class="el-dialog__close el-icon el-icon-close"></i></button>-->
+    <div class="filter-top-box">
+      <div class="filter-top-body">
+        <loading :loading="loading"></loading>
+        <div class="filter-top-type">{{itemData.value}}{{$t('overall.operator')}}{{itemData.label}}</div>
+        <el-table
+            :data="popoverData"
+            :header-cell-style="tableHeaderCellStyle"
+            :header-row-style="tableHeaderRowStyle"
+            :row-style="rowStyle"
+            :cell-style="{'text-align':'left','padding': '1px 0','border':'0px'}"
+            class="customer-no-border-table"
+            style="width: 100%; min-height: 293px;"
+            @row-click="filter"
+        >
+          <el-table-column label="Top10" type="index" :index="indexMethod" width="81"/>
+          <el-table-column prop="name" :label="itemData.label" width="120">
+            <template #default="scope">
+              <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" :title="scope.row.name">
+                {{valueHandle(scope.row.name, topColumn) || 'unknown'}}
+              </div>
+            </template>
+          </el-table-column>
+            <el-table-column prop="count" :label="$t('overall.number')" width="79" />
+            <el-table-column prop="percent" :label="$t('overall.percent')" >
+              <template #default="scope">
+                <div class="top-table-percent" >
+                  {{(this.totalCount === 0 ? 0 : parseFloat(scope.row.count / this.totalCount) * 100).toFixed(2)}}%
+                  <div class="top-table-progress"><el-progress :percentage="(this.totalCount === 0 ? 0 : parseFloat(scope.row.count / this.totalCount) * 100).toFixed(2)" :show-text="false" color="#23BF9A"></el-progress></div>
+                </div>
+              </template>
+            </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { riskLevelMapping } from '@/utils/constants'
+import Loading from '@/components/common/Loading'
+
+export default {
+  components: { Loading },
+  props: {
+    loading: Boolean,
+    popoverData: Array,
+    itemData: Object,
+    totalCount: Number,
+    topColumn: String
+  },
+  data () {
+    return {
+      custom: []
+    }
+  },
+  computed: {
+    totalCount2 () {
+      return function (row) {
+        console.info(this.totalCount, row, (this.totalCount === 0 ? 0 : parseFloat(row.count / this.totalCount) * 100).toFixed(2))
+        return (this.totalCount === 0 ? 0 : parseFloat(row.count / this.totalCount) * 100).toFixed(2)
+      }
+    }
+  },
+  methods: {
+    indexMethod (index) {
+      return index + 1
+    },
+    esc () {
+      this.$emit('close')
+    },
+    filter (row) {
+      this.$emit('filter', row.name, this.itemData)
+    },
+    valueHandle (value, columnName) {
+      if (columnName === 'app_risk') {
+        const m = riskLevelMapping.find(mapping => {
+          return mapping.value === value
+        })
+        return (m && m.name) || value
+      }
+      return value
+    },
+    tableHeaderCellStyle ({ row, column, rowIndex, columnIndex }) {
+      if (rowIndex === 0) {
+        return 'padding-bottom:5px;padding-top:14px;'
+      }
+    },
+    tableHeaderRowStyle ({ row, rowIndex }) {
+      if (rowIndex === 0) {
+        return 'color: #333333;font-weight: 500;font-size: 14px;'
+      }
+    },
+    rowStyle ({ row, rowIndex }) {
+      return 'height:21px;font-size: 14px;color: #666666;font-weight: 400;'
+    }
+  }
+}
+</script>
+<style>
+    .entity-pop-custom .el-table::before {
+        height: 0px;
+    }
+
+</style>
--- 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 {
--- 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}`"
--- 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>