CN-1219: 实体搜索页下方统计原型优化

src/assets/css/components/views/entityExplorer/entity-explorer.scss

@@ -134,9 +134,10 @@
           display: inline-block;
           position: relative;
           .overview-left-loading-span {
-            font-size: 30px;
+            font-family: NotoSansHans-Medium;
-            color: #333333;
+            font-size: 18px;
-            font-weight: bold;
+            color: #575757;
+            font-weight: 500;
           }
           .chart__loading i.el-icon-loading {
             top: calc(50% - 12px);
@@ -152,6 +153,7 @@
         .right-row {
           display: flex;
           height: 18px;
+          line-height: 18px;
           align-items: center;
           color: #666666;
 
@@ -174,15 +176,41 @@
             color: #333333;
             font-weight: bold;
           }
+          .right-value-block {
+            font-family: NotoSansHans-Medium;
+            font-size: 14px;
+            color: #353636;
+            font-weight: 600;
+
+            .last-hour {
+              font-family: NotoSansSChineseRegular;
+              font-size: 12px;
+              color: #717171;
+              font-weight: 400;
+            }
+          }
           i {
             padding-right: 4px;
-            font-size: 18px;
+            font-size: 19px;
           }
           .cn-icon-increase {
             color: #23BF9A;
           }
           .cn-icon-active {
-            color: #0091FF;
+            color: #35ADDA;
+          }
+          .entity-explorer-total__icon {
+            width: 18px;
+            height: 18px;
+            line-height: 18px;
+            padding-left: 3px;
+            background-color: #04A6AB;
+            color: #fff;
+            border-radius: 50%;
+            font-size: 12px;
+            font-weight: 500;
+            margin-right: 4px;
+            margin-left: 1px;
           }
         }
       }

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1691573279860') format('woff2'),
+  src: url('iconfont.woff2?t=1691743782241') format('woff2'),
-       url('iconfont.woff?t=1691573279860') format('woff'),
+       url('iconfont.woff?t=1691743782241') format('woff'),
-       url('iconfont.ttf?t=1691573279860') format('truetype');
+       url('iconfont.ttf?t=1691743782241') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cn-icon-_zhanbi:before {
+  content: "\e65a";
+}
+
+.cn-icon-tag1:before {
+  content: "\e774";
+}
+
 .cn-icon-Event1:before {
   content: "\e80b";
 }

src/components/advancedSearch/Index.vue

@@ -7,6 +7,7 @@
         ref="textMode"
         :column-list="columnList"
         :str="str"
+        :show-list="showList"
         @changeMode="changeMode"
         @search="search"
     ></text-mode>
@@ -17,6 +18,7 @@
         :operator-list="showOperatorList"
         :connection-list="showConnectionList"
         :convert-meta-list="metaList"
+        :show-list="showList"
         @changeMode="changeMode"
         @search="search"
     ></tag-mode>
@@ -50,6 +52,9 @@ export default {
       type: Boolean,
       default: true
     },
+    showList: {
+      type: Boolean
+    },
     // 条件字段列表
     columnList: {
       type: Array,

src/components/advancedSearch/TagMode.vue

@@ -88,7 +88,7 @@
           </template>
         </el-popover>
       </div>
-      <div class="search__suffix new-search__suffix" @click="search">
+      <div class="search__suffix" :class="showList ? 'new-search__suffix' : 'entity-explorer-search'" @click="search">
         <i class="el-icon-search"></i>
       </div>
     </div>
@@ -107,7 +107,8 @@ export default {
     columnList: Array,
     operatorList: Array,
     connectionList: Array,
-    convertMetaList: Array
+    convertMetaList: Array,
+    showList: Boolean
   },
   data () {
     return {

src/components/advancedSearch/TextMode.vue

@@ -18,7 +18,7 @@
     <div class="search__suffix-close" @click="cleanParams">
       <i class="el-icon-error"></i>
     </div>
-    <div class="search__suffix new-search__suffix" @click="search">
+    <div class="search__suffix" :class="showList ? 'new-search__suffix' : 'entity-explorer-search'" @click="search">
       <i class="el-icon-search"></i>
     </div>
   </div>
@@ -42,7 +42,8 @@ export default {
   name: 'TextMode',
   props: {
     columnList: Array,
-    str: String
+    str: String,
+    showList: Boolean
   },
   data () {
     return {
@@ -230,4 +231,8 @@ export default {
     margin-top: 9px !important;
   }
 }
+.entity-explorer-search {
+  color: #3976CB;
+  margin-top: -2px;
+}
 </style>

src/utils/tools.js

@@ -1360,10 +1360,10 @@ export function toUpperCaseByString (str) {
  * @returns {string}
  */
 export function numberWithCommas (num) {
-  if (typeof num === 'number') {
+  if (num) {
     return num.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',')
   } else {
-    return num
+    return '-'
   }
 }
 

src/views/entityExplorer/EntityExplorer.vue

@@ -63,19 +63,28 @@
           <div class="overview-left">
             <span class="overview-left-loading">
               <loading :loading="loadingApp"></loading>
-              <span class="overview-left-loading-span">{{ numberWithCommas(entityAppTotal) }}</span>
+              <span class="overview-left-loading-span">APP</span>
             </span>
           </div>
           <div class="overview-right">
-            <div class="right-row">
+            <div class="right-row margin-b-6">
-              APP
+              <i class="cn-icon cn-icon-_zhanbi entity-explorer-total__icon"></i>
-            </div>
+              <div class="right-label">{{ $t('network.total') }}</div>
-            <div class="right-row">
-              <i class="cn-icon cn-icon-active"></i>
-              <div class="right-label">Active</div>
               <div class="right-label-loading">
                 <loading :loading="loadingAppActive" size="small"></loading>
-                <div class="right-value">{{ numberWithCommas(entityAppActive) }}</div>
+                <div class="right-value">{{ numberWithCommas(entityAppTotal) }}</div>
+              </div>
+            </div>
+
+            <div class="right-row">
+              <i class="cn-icon cn-icon-active"></i>
+              <div class="right-label">{{ $t('entity.active') }}</div>
+              <div class="right-label-loading">
+                <loading :loading="loadingAppActive" size="small"></loading>
+                <div class="right-value-block">
+                  <span class="margin-r-6">{{ numberWithCommas(entityAppActive) }}</span>
+                  <span class="last-hour">{{ $t('entity.inLastHour') }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -85,19 +94,28 @@
           <div class="overview-left">
             <span class="overview-left-loading">
               <loading :loading="loadingDomain"></loading>
-              <span class="overview-left-loading-span">{{ numberWithCommas(entityDomainTotal) }}</span>
+              <span class="overview-left-loading-span">Domain</span>
             </span>
           </div>
           <div class="overview-right">
-            <div class="right-row">
+            <div class="right-row margin-b-6">
-              DOMAIN
+              <i class="cn-icon cn-icon-_zhanbi entity-explorer-total__icon"></i>
+              <div class="right-label">{{ $t('network.total') }}</div>
+              <div class="right-label-loading">
+                <loading :loading="loadingAppActive" size="small"></loading>
+                <div class="right-value">{{ numberWithCommas(entityDomainTotal) }}</div>
+              </div>
             </div>
+
             <div class="right-row">
               <i class="cn-icon cn-icon-active"></i>
-              <div class="right-label">Active</div>
+              <div class="right-label">{{ $t('entity.active') }}</div>
               <div class="right-label-loading">
                 <loading :loading="loadingDomainActive" size="small"></loading>
-                <div class="right-value">{{ numberWithCommas(entityDomainActive) }}</div>
+                <div class="right-value-block">
+                  <span class="margin-r-6">{{ numberWithCommas(entityDomainActive) }}</span>
+                  <span class="last-hour">{{ $t('entity.inLastHour') }}</span>
+                </div>
               </div>
             </div>
           </div>
@@ -107,19 +125,28 @@
           <div class="overview-left">
             <span class="overview-left-loading">
               <loading :loading="loadingIp"></loading>
-              <span class="overview-left-loading-span">{{ numberWithCommas(entityIpTotal) }}</span>
+              <span class="overview-left-loading-span">IP</span>
             </span>
           </div>
           <div class="overview-right">
-            <div class="right-row">
+            <div class="right-row margin-b-6">
-              IP
+              <i class="cn-icon cn-icon-_zhanbi entity-explorer-total__icon"></i>
+              <div class="right-label">{{ $t('network.total') }}</div>
+              <div class="right-label-loading">
+                <loading :loading="loadingAppActive" size="small"></loading>
+                <div class="right-value">{{ numberWithCommas(entityIpTotal) }}</div>
+              </div>
             </div>
+
             <div class="right-row">
               <i class="cn-icon cn-icon-active"></i>
-              <div class="right-label">Active</div>
+              <div class="right-label">{{ $t('entity.active') }}</div>
               <div class="right-label-loading">
                 <loading :loading="loadingIpActive" size="small"></loading>
-                <div class="right-value">{{ numberWithCommas(entityIpActive) }}</div>
+                <div class="right-value-block">
+                  <span class="margin-r-6">{{ numberWithCommas(entityIpActive) }}</span>
+                  <span class="last-hour">{{ $t('entity.inLastHour') }}</span>
+                </div>
               </div>
             </div>
           </div>

src/views/entityExplorer/search/ExplorerSearch.vue

@@ -10,6 +10,7 @@
           :connection-list="connectionList"
           :default-mode="defaultMode"
           :full-text="true"
+          :show-list="showList"
           :class="{'advanced-search--show-list': showList}"
           @search="search"
         ></advanced-search>