From 868b6c06e5a4a001ebc2efe5016a70fd42e54459 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 25 Apr 2024 14:36:46 +0800
Subject: [PATCH] =?UTF-8?q?CN-1592=20fix:=20tag=20table=20=E4=B8=8B?=
 =?UTF-8?q?=E6=8B=89=E5=AE=9E=E4=BD=93=E8=AE=A1=E6=95=B0=E5=B1=95=E7=8E=B0?=
 =?UTF-8?q?=E5=BD=A2=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/components/views/tag/tag.scss  | 36 ++++++++++++++-
 src/components/table/tag/TagTable.vue         | 46 +++++++++++++------
 .../charts2/charts/options/echartOption.js    |  7 +--
 src/views/location/Index.vue                  | 12 -----
 4 files changed, 70 insertions(+), 31 deletions(-)

diff --git a/src/assets/css/components/views/tag/tag.scss b/src/assets/css/components/views/tag/tag.scss
index f57fcb1f..bb9bdca2 100644
--- a/src/assets/css/components/views/tag/tag.scss
+++ b/src/assets/css/components/views/tag/tag.scss
@@ -128,7 +128,7 @@
                 width: 200px;
                 display: flex;
                 flex-direction: column;
-                justify-content: center;
+                padding-top: 30px;
 
                 .expand-count {
                   font-size: 22px;
@@ -141,6 +141,40 @@
                     padding: 2px 3px 0 0;
                   }
                 }
+                .expand-observed-entities {
+                  font-size: 12px;
+                  color: var(--el-color-primary);
+                  margin-bottom: 4px;
+                  cursor: pointer;
+                  text-transform: capitalize;
+
+                  &.expand-observed-entities--disabled {
+                    color: var(--el-text-color-regular);
+                    cursor: default;
+                  }
+                  i {
+                    top: 1px;
+                  }
+                }
+                .entity-count-detail {
+                  display: flex;
+                  flex-direction: column;
+                  align-items: flex-start;
+                  font-size: 12px;
+
+                  .detail__row {
+                    display: flex;
+
+                    .detail__label {
+                      width: 90px;
+                      text-align: right;
+                    }
+                    .detail__value {
+                      padding-left: 10px;
+                    }
+                  }
+                }
+
                 .expand-icon {
                   display: flex;
                   justify-content: space-evenly;
diff --git a/src/components/table/tag/TagTable.vue b/src/components/table/tag/TagTable.vue
index 6294b6c9..c12e8e28 100644
--- a/src/components/table/tag/TagTable.vue
+++ b/src/components/table/tag/TagTable.vue
@@ -43,7 +43,7 @@
                 </ul>
               </el-row>
             </el-popover>
-            <span class="expand-observed-entities" :class="{'expand-observed-entities--disabled': disableToEntity}" @click="toEntityList(props.row)">{{countDesc}}&nbsp;<el-icon v-if="!disableToEntity && !showError"><Right /></el-icon></span>
+<!--            <span class="expand-observed-entities" :class="{'expand-observed-entities&#45;&#45;disabled': disableToEntity}" @click="toEntityList(props.row)">{{countDesc}}&nbsp;<el-icon v-if="!disableToEntity && !showError"><Right /></el-icon></span>-->
             <date-time-range v-if="noMinutes"
                 class="date-time-range"
                 :start-time="timeFilter.startTime"
@@ -69,6 +69,22 @@
               <div class="expand-left">
                 <div class="chart-drawing" :id="`chart${props.row.id}`"></div>
               </div>
+              <div class="expand-right">
+                <div class="expand-count">{{observedCount}}</div>
+                <div class="expand-observed-entities" :class="{'expand-observed-entities--disabled': disableToEntity}" @click="toEntityList(props.row)">
+                  {{countDesc}}&nbsp;<el-icon v-if="!disableToEntity"><Right /></el-icon>
+                </div>
+                <div v-if="props.row.indicatorType && props.row.indicatorType.indexOf('IP') > -1 &&
+                           props.row.indicatorType && props.row.indicatorType.indexOf('Domain') > -1"
+                     class="entity-count-detail">
+                  <div class="detail__row">
+                    <div class="detail__label">IP</div><span class="detail__value">{{observedIpCount}}</span>
+                  </div>
+                  <div class="detail__row">
+                    <div class="detail__label">{{$t('overall.domain')}}</div><span class="detail__value">{{observedDomainCount}}</span>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -445,48 +461,48 @@ export default {
       if (hasIp && hasDomain) {
         if (this.disableToEntity) {
           if (this.observedCount < 2) {
-            desc += `${this.observedCount} ${this.$t('overall.entity2')}`
+            desc = this.$t('overall.entity2')
           } else {
-            desc += `${this.observedCount} ${this.$t('overall.entities2')}`
+            desc = this.$t('overall.entities2')
           }
         } else { // 活跃实体
           if (this.observedCount < 2) {
-            desc += `${this.observedCount} ${this.$t('tag.activeEntity2')}`
+            desc = this.$t('tag.activeEntity2')
           } else {
-            desc += `${this.observedCount} ${this.$t('tag.observedEntities2')}`
+            desc = this.$t('tag.observedEntities2')
           }
         }
-        if (this.observedCount > 0) {
+        /*if (this.observedCount > 0) {
           desc += `, IP ${this.observedIpCount}, ${this.$t('overall.domain2')} ${this.observedDomainCount}`
-        }
+        }*/
       } else {
         // 只有单种实体时，单个描述
         if (this.disableToEntity) {
           if (hasIp) {
             if (this.observedIpCount < 2) {
-              desc += `${this.observedIpCount} IP`
+              desc = 'IP'
             } else {
-              desc += `${this.observedIpCount} ${this.$t('overall.ips')}`
+              desc = this.$t('overall.ips')
             }
           } else if (hasDomain) {
             if (this.observedDomainCount < 2) {
-              desc += `${this.observedDomainCount} ${this.$t('overall.domain2')}`
+              desc = this.$t('overall.domain2')
             } else {
-              desc += `${this.observedDomainCount} ${this.$t('overall.domains2')}`
+              desc = this.$t('overall.domains2')
             }
           }
         } else { // 活跃实体
           if (hasIp) {
             if (this.observedIpCount < 2) {
-              desc += `${this.observedIpCount} ${this.$t('tag.observedIp2')}`
+              desc = this.$t('tag.observedIp2')
             } else {
-              desc += `${this.observedIpCount} ${this.$t('tag.observedIps2')}`
+              desc = this.$t('tag.observedIps2')
             }
           } else if (hasDomain) {
             if (this.observedDomainCount < 2) {
-              desc += `${this.observedDomainCount} ${this.$t('tag.observedDomain2')}`
+              desc = this.$t('tag.observedDomain2')
             } else {
-              desc += `${this.observedDomainCount} ${this.$t('tag.observedDomains2')}`
+              desc = this.$t('tag.observedDomains2')
             }
           }
         }
diff --git a/src/views/charts2/charts/options/echartOption.js b/src/views/charts2/charts/options/echartOption.js
index 583302d6..29ee269d 100644
--- a/src/views/charts2/charts/options/echartOption.js
+++ b/src/views/charts2/charts/options/echartOption.js
@@ -808,13 +808,14 @@ export const tagLineChartOption = {
     x: 'center',
     y: 'bottom',
     icon: 'circle',
-    itemGap: 50
+    itemGap: 40,
+    bottom: 0
   },
   grid: {
     top: '12%',
     left: '1%',
-    right: '1%',
-    bottom: 30,
+    right: 0,
+    bottom: 25,
     containLabel: true
   },
   xAxis: [
diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue
index 4b465711..2b093d28 100644
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -310,18 +310,6 @@
               <div class="item__label">{{ $t('location.number') }}</div>
               <div class="item__value">{{currentPolygon.number}}</div>
             </div>
-            <div class="body__item">
-              <div class="item__label">{{ $t('location.locals') }}</div>
-              <div class="item__value">{{currentPolygon.number}}</div>
-            </div>
-            <div class="body__item">
-              <div class="item__label">{{ $t('location.visitors') }}</div>
-              <div class="item__value">{{currentPolygon.number}}</div>
-            </div>
-            <div class="body__item">
-              <div class="item__label">{{ $t('location.roamers') }}</div>
-              <div class="item__value">{{currentPolygon.number}}</div>
-            </div>
           </template>
           <template v-else>
             <template v-for="(item, i) in JSON.parse(currentPolygon.locations)" :key="item.hexId">