CN-53 perf: 单值图相关

src/components/charts/panel.scss

@@ -106,6 +106,12 @@
         font-size: 16px;
         color: #666666;
       }
+      .single-value__unit {
+        font-weight: normal;
+        padding-left: 10px;
+        color: #666;
+        font-size: 20px;
+      }
     }
   }
   &>.cn-chart__single-value.cn-chart__single-value--icon-right {

src/components/entities/EntityList.vue

@@ -26,45 +26,45 @@
           <template v-if="entityType === 'ip'">
             <div class="body__row">
               <span class="body__row-label">{{$t('common.country')}}:</span>
-              <span class="body__row-value">{{d.country || '-'}}</span>
+              <div class="body__row-value" :title="d.country">{{d.country || '-'}}</div>
             </div>
             <div class="body__row">
               <span class="body__row-label">{{$t('common.region')}}:</span>
-              <span class="body__row-value">{{d.region || '-'}}</span>
+              <div class="body__row-value" :title="d.region">{{d.region || '-'}}</div>
             </div>
             <div class="body__row">
               <span class="body__row-label">{{$t('entities.asn')}}:</span>
-              <span class="body__row-value">{{d.asn || '-'}}</span>
+              <div class="body__row-value" :title="d.asn">{{d.asn || '-'}}</div>
             </div>
             <div class="body__detail">{{$t('common.detail')}}</div>
           </template>
           <template v-else-if="entityType === 'domain'">
             <div class="body__row">
               <span class="body__row-label">{{$t('entities.categoryGroup')}}:</span>
-              <span class="body__row-value">{{d.categoryGroup || '-'}}</span>
+              <div class="body__row-value" :title="d.categoryGroup">{{d.categoryGroup || '-'}}</div>
             </div>
             <div class="body__row">
               <span class="body__row-label">{{$t('entities.categoryName')}}:</span>
-              <span class="body__row-value">{{d.categoryName || '-'}}</span>
+              <div class="body__row-value" :title="d.categoryName">{{d.categoryName || '-'}}</div>
             </div>
             <div class="body__row">
               <span class="body__row-label">{{$t('entities.creditScore')}}:</span>
-              <span class="body__row-value">{{d.reputationScore || '-'}}</span>
+              <div class="body__row-value" :title="d.reputationScore">{{d.reputationScore || '-'}}</div>
             </div>
             <div class="body__detail">{{$t('common.detail')}}</div>
           </template>
           <template v-else-if="entityType === 'app'">
             <div class="body__row">
               <span class="body__row-label">APP ID:</span>
-              <span class="body__row-value">{{d.appId || '-'}}</span>
+              <div class="body__row-value" :title="d.appId">{{d.appId || '-'}}</div>
             </div>
             <div class="body__row">
               <span class="body__row-label">{{$t('entities.category')}}:</span>
-              <span class="body__row-value">{{d.appCategory || '-'}}</span>
+              <div class="body__row-value" :title="d.appCategory">{{d.appCategory || '-'}}</div>
             </div>
             <div class="body__row">
               <span class="body__row-label">{{$t('entities.subcategory')}}:</span>
-              <span class="body__row-value">{{d.appSubategory || '-'}}</span>
+              <div class="body__row-value" :title="d.appSubategory">{{d.appSubategory || '-'}}</div>
             </div>
             <div class="body__detail">{{$t('common.detail')}}</div>
           </template>

src/components/entities/entities.scss

@@ -70,18 +70,27 @@
           }
         }
         .cn-entity__body {
+          overflow: hidden;
+
           .body__row {
+            display: flex;
             padding: 0 0 0 20px;
             color: #666;
 
             .body__row-label {
               padding-right: 15px;
             }
+            .body__row-value {
+              width: calc(100% - 150px);
+              overflow: hidden;
+              text-overflow: ellipsis;
+            }
           }
           .body__detail {
             padding: 10px 0 0 20px;
             color: $--color-primary;
             cursor: pointer;
+
           }
         }
       }

src/views/charts/Chart.vue

@@ -83,7 +83,10 @@
       :icon="singleValue.icon"
   >
     <template #title><span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span></template>
-    <template #data>{{singleValue.value}}</template>
+    <template #data>
+      <span>{{handleSingleValue(singleValue.value)}}</span>
+      <span v-if="chartInfo.params && chartInfo.params.unit" class="single-value__unit">{{chartInfo.params.unit}}</span>
+    </template>
   </single-value>
   <!-- 表格 -->
   <chart-table
@@ -217,7 +220,7 @@ export default {
   },
   methods: {
     initChart () {
-      const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
+      const chartParams = this.chartInfo.params
       if (this.isMap) {
         const { chart, polygonSeries } = this.initMap(`chart${this.chartInfo.id}`)
         this.myChart = chart
@@ -284,7 +287,7 @@ export default {
       }
     },
     loadMap (polygonSeries) {
-      const chartParams = this.chartInfo.params ? JSON.parse(this.chartInfo.params) : null // 图表参数
+      const chartParams = this.chartInfo.params
       const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000), country: '', region: '' } // 统计数据的查询参数
       get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
         if (response.code === 200) {
@@ -518,6 +521,11 @@ export default {
         gridColumn,
         gridRow
       }
+    },
+    handleSingleValue () {
+      return function (value) {
+        return Number(value) < 0.01 ? '< 0.01' : this.$_.round(value, 2)
+      }
     }
   },
   mounted () {
@@ -537,6 +545,7 @@ export default {
   setup (props) {
     const chartInfo = JSON.parse(JSON.stringify(props.chart))
     chartInfo.category = getTypeCategory(props.chart.type)
+    chartInfo.params = chartInfo.params ? JSON.parse(chartInfo.params) : null
     return {
       chartInfo,
       layoutConstant,

src/views/entities/EntityExplorer.vue

@@ -90,11 +90,8 @@ export default {
         default: break
       }
       const data = await this.loadFilterData(this.filterType, key)
-      if (this.$_.isEmpty(data)) {
+      this.filterData[index].data = this.$_.concat(this.filterData[index].data, data)
-        this.filterData[index].hasnotMore = true
+      this.filterData[index].hasnotMore = this.$_.isEmpty(data) || data.length < 10
-      } else {
-        this.filterData[index].data = this.$_.concat(this.filterData[index].data, data)
-      }
     },
     async loadFilterData (filterType, key) {
       let data
@@ -174,6 +171,7 @@ export default {
       Promise.all(requests).then(responses => {
         data.forEach((d, i) => {
           d.data = responses[i]
+          d.hasnotMore = this.$_.isEmpty(responses[i]) || responses[i].length < 10
         })
         this.filterData = data
       })
@@ -222,6 +220,7 @@ export default {
       key: 'country',
       childrenKey: 'region',
       data: country,
+      hasnotMore: this.$_.isEmpty(country) || country.length < 10,
       filterType: this.filterType,
       loadFilter
     })
@@ -229,9 +228,11 @@ export default {
       title: this.$t('entities.asn'),
       key: 'asn',
       data: asn,
+      hasnotMore: this.$_.isEmpty(asn) || asn.length < 10,
       filterType: this.filterType,
       loadFilter
     })
+    console.info(this.filterData)
   },
   setup () {
     const filterType = ref(Object.keys(entityType)[0])