gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
刘洪洪
2023-08-11 17:53:51 +08:00
parent 1492fe217c
commit 8b1e57eaa1
12 changed files with 108 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -134,9 +134,10 @@
display: inline-block;
position: relative;
.overview-left-loading-span {
font-size: 30px;
color: #333333;
font-weight: bold;
font-family: NotoSansHans-Medium;
font-size: 18px;
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;
}
}
}

14
src/assets/css/font/iconfont.css
View File

@@ -1,8 +1,8 @@
@font-face {
font-family: "cn-icon"; /* Project id 2614877 */
src: url('iconfont.woff2?t=1691573279860') format('woff2'),
url('iconfont.woff?t=1691573279860') format('woff'),
url('iconfont.ttf?t=1691573279860') format('truetype');
src: url('iconfont.woff2?t=1691743782241') format('woff2'),
url('iconfont.woff?t=1691743782241') format('woff'),
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";
}

2
src/assets/css/font/iconfont.js
View File

File diff suppressed because one or more lines are too long

BIN
src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

5
src/components/advancedSearch/Index.vue
View File

@@ -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,

5
src/components/advancedSearch/TagMode.vue
View File

@@ -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 {

9
src/components/advancedSearch/TextMode.vue
View File

@@ -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>

4
src/utils/tools.js
View File

@@ -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 '-'
}
}

63
src/views/entityExplorer/EntityExplorer.vue
View File

@@ -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">
APP
</div>
<div class="right-row">
<i class="cn-icon cn-icon-active"></i>
<div class="right-label">Active</div>
<div class="right-row margin-b-6">
<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(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">
DOMAIN
<div class="right-row margin-b-6">
<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">
IP
<div class="right-row margin-b-6">
<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>

1
src/views/entityExplorer/search/ExplorerSearch.vue
View File

@@ -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>