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

feat: chart颜色定义/单值图样式优化等

Browse Source
This commit is contained in:
chenjinsong
2021-07-06 17:51:17 +08:00
parent c08ceb1966
commit c80d554596
12 changed files with 86 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
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=1624011302849') format('woff2'),
url('iconfont.woff?t=1624011302849') format('woff'),
url('iconfont.ttf?t=1624011302849') format('truetype');
src: url('iconfont.woff2?t=1625552111572') format('woff2'),
url('iconfont.woff?t=1625552111572') format('woff'),
url('iconfont.ttf?t=1625552111572') format('truetype');
}
.cn-icon {
@@ -13,6 +13,30 @@
-moz-osx-font-smoothing: grayscale;
}
.cn-icon-ip:before {
content: "\e73d";
}
.cn-icon-app:before {
content: "\e73e";
}
.cn-icon-domain:before {
content: "\e73f";
}
.cn-icon-cloud:before {
content: "\e73c";
}
.cn-icon-user:before {
content: "\e73a";
}
.cn-icon-pin:before {
content: "\e73b";
}
.cn-icon-view:before {
content: "\e702";
}
@@ -165,7 +189,7 @@
content: "\e714";
}
.cn-icon-entitles:before {
.cn-icon-entities:before {
content: "\e715";
}

310
src/assets/css/font/iconfont.json
View File

@@ -1,310 +0,0 @@
{
"id": "2614877",
"name": "Cyber Narrator",
"font_family": "cn-icon",
"css_prefix_text": "cn-icon-",
"description": "",
"glyphs": [
{
"icon_id": "20712322",
"name": "view",
"font_class": "view1",
"unicode": "e702",
"unicode_decimal": 59138
},
{
"icon_id": "21907756",
"name": "更多操作1",
"font_class": "more3",
"unicode": "e739",
"unicode_decimal": 59193
},
{
"icon_id": "16827143",
"name": "编辑",
"font_class": "edit",
"unicode": "e68c",
"unicode_decimal": 59020
},
{
"icon_id": "16827146",
"name": "删除",
"font_class": "delete",
"unicode": "e68f",
"unicode_decimal": 59023
},
{
"icon_id": "21119423",
"name": "更 多",
"font_class": "more1",
"unicode": "e677",
"unicode_decimal": 58999
},
{
"icon_id": "16827151",
"name": "设置",
"font_class": "gear",
"unicode": "e694",
"unicode_decimal": 59028
},
{
"icon_id": "21209541",
"name": "Add",
"font_class": "add",
"unicode": "e738",
"unicode_decimal": 59192
},
{
"icon_id": "22325159",
"name": "向上",
"font_class": "xiangshang",
"unicode": "e732",
"unicode_decimal": 59186
},
{
"icon_id": "22325160",
"name": "向下",
"font_class": "xiangxia",
"unicode": "e737",
"unicode_decimal": 59191
},
{
"icon_id": "22324980",
"name": "左箭头",
"font_class": "arrow-left",
"unicode": "e735",
"unicode_decimal": 59189
},
{
"icon_id": "22324981",
"name": "右箭头",
"font_class": "arrow-right",
"unicode": "e736",
"unicode_decimal": 59190
},
{
"icon_id": "22320764",
"name": "id",
"font_class": "id",
"unicode": "e734",
"unicode_decimal": 59188
},
{
"icon_id": "22318866",
"name": "地理位置",
"font_class": "position",
"unicode": "e72e",
"unicode_decimal": 59182
},
{
"icon_id": "22318867",
"name": "DNS",
"font_class": "dns",
"unicode": "e72f",
"unicode_decimal": 59183
},
{
"icon_id": "22318868",
"name": "子分类",
"font_class": "sub-category",
"unicode": "e730",
"unicode_decimal": 59184
},
{
"icon_id": "22318869",
"name": "风险",
"font_class": "risk",
"unicode": "e731",
"unicode_decimal": 59185
},
{
"icon_id": "22318871",
"name": "类别",
"font_class": "category",
"unicode": "e733",
"unicode_decimal": 59187
},
{
"icon_id": "22292878",
"name": "告警",
"font_class": "alert",
"unicode": "e72d",
"unicode_decimal": 59181
},
{
"icon_id": "22292845",
"name": "下拉",
"font_class": "dropdown",
"unicode": "e724",
"unicode_decimal": 59172
},
{
"icon_id": "22292846",
"name": "下载",
"font_class": "download",
"unicode": "e725",
"unicode_decimal": 59173
},
{
"icon_id": "22292847",
"name": "选中",
"font_class": "check",
"unicode": "e726",
"unicode_decimal": 59174
},
{
"icon_id": "22292848",
"name": "刷新",
"font_class": "refresh",
"unicode": "e727",
"unicode_decimal": 59175
},
{
"icon_id": "22292849",
"name": "中英文",
"font_class": "language",
"unicode": "e728",
"unicode_decimal": 59176
},
{
"icon_id": "22292850",
"name": "更多",
"font_class": "more",
"unicode": "e729",
"unicode_decimal": 59177
},
{
"icon_id": "22292851",
"name": "样式",
"font_class": "style",
"unicode": "e72a",
"unicode_decimal": 59178
},
{
"icon_id": "22292852",
"name": "展开",
"font_class": "expand",
"unicode": "e72b",
"unicode_decimal": 59179
},
{
"icon_id": "22292853",
"name": "最大化",
"font_class": "full-screen",
"unicode": "e72c",
"unicode_decimal": 59180
},
{
"icon_id": "22292732",
"name": "重传",
"font_class": "upload",
"unicode": "e71f",
"unicode_decimal": 59167
},
{
"icon_id": "22292733",
"name": "丢包率",
"font_class": "package-loss",
"unicode": "e720",
"unicode_decimal": 59168
},
{
"icon_id": "22292734",
"name": "HTTP",
"font_class": "http",
"unicode": "e721",
"unicode_decimal": 59169
},
{
"icon_id": "22292735",
"name": "时间",
"font_class": "time",
"unicode": "e722",
"unicode_decimal": 59170
},
{
"icon_id": "22292736",
"name": "SSL",
"font_class": "ssl",
"unicode": "e723",
"unicode_decimal": 59171
},
{
"icon_id": "22292709",
"name": "根域名",
"font_class": "root-domain",
"unicode": "e71d",
"unicode_decimal": 59165
},
{
"icon_id": "22292704",
"name": "DOH域名",
"font_class": "doh-domain",
"unicode": "e71a",
"unicode_decimal": 59162
},
{
"icon_id": "22290483",
"name": "递归域名",
"font_class": "recursive-domain",
"unicode": "e71b",
"unicode_decimal": 59163
},
{
"icon_id": "22290484",
"name": "权威域名",
"font_class": "authoritative-domain",
"unicode": "e71c",
"unicode_decimal": 59164
},
{
"icon_id": "22290486",
"name": "顶级域名",
"font_class": "top-level-domain",
"unicode": "e71e",
"unicode_decimal": 59166
},
{
"icon_id": "22290435",
"name": "Dashboard",
"font_class": "dashboard",
"unicode": "e714",
"unicode_decimal": 59156
},
{
"icon_id": "22290436",
"name": "Entitles",
"font_class": "entitles",
"unicode": "e715",
"unicode_decimal": 59157
},
{
"icon_id": "22290437",
"name": "Incidents",
"font_class": "incidents",
"unicode": "e716",
"unicode_decimal": 59158
},
{
"icon_id": "22290438",
"name": "Artifacts Brower",
"font_class": "artifacts-brower",
"unicode": "e717",
"unicode_decimal": 59159
},
{
"icon_id": "22290439",
"name": "Setting",
"font_class": "setting",
"unicode": "e718",
"unicode_decimal": 59160
},
{
"icon_id": "22290440",
"name": "Reports",
"font_class": "reports",
"unicode": "e719",
"unicode_decimal": 59161
}
]
}

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/charts/ChartSingleValue.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="cn-chart cn-chart__single-value" :class="singleValueClass(type)">
<div class="single-value-icon__box">
<div class="single-value__icon"><i class="el-icon-apple"></i></div>
<div class="single-value__icon"><i :class="icon"></i></div>
</div>
<div class="single-value__content" v-if="type === 51">
<div class="content__data">
@@ -22,7 +22,8 @@
export default {
name: 'ChartSingleValue',
props: {
type: Number
type: Number,
icon: String
},
computed: {
singleValueClass () {

5
src/components/charts/chart-options.js
View File

@@ -5,7 +5,10 @@
*/
import { format } from 'echarts'
import _ from 'lodash'
export const chartColor = ['#73A0FA', '#73DEB3', '#F7C739', '#EB7E65', '#FFAB67', '#A285D2', '#FFA8CB']
export const chartColor = ['#5370C6', '#90CC74', '#FAC858', '#EE6666',
'#73BFDE', '#3BA172', '#FC8452', '#9960B4',
'#E97CCC', '#FEA69E', '#0F8AB2', '#57CBAC',
'#5888BC', '#63B6AC', '#EDC6B2', '#D5746B']
export function getChartColor (index) {
return chartColor[index % chartColor.length]
}

17
src/components/charts/panel.scss
View File

@@ -55,21 +55,18 @@
}
&>.cn-chart__single-value.cn-chart__single-value--icon-left {
display: flex;
justify-content: center;
align-items: center;
grid-template-columns:(5,200px);
.single-value-icon__box {
height: 70px;
flex: 4;
display: flex;
justify-content: space-around;
align-items: center;
justify-content: center;
flex: 0 0 40%;
}
.single-value__icon {
margin-right: 7.5%;
display: flex;
justify-content: center;
width: 72px;
height: 72px;
background-color: $--chart-single-value-icon-background-color;
@@ -77,18 +74,17 @@
i {
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 25px;
font-size: 28px;
color: $--color-primary;
}
}
.single-value__content {
flex: 6;
display: flex;
flex-direction: column;
max-width: 60%;
padding-right: 10px;
.content__data {
padding-bottom: 7%;
@@ -97,7 +93,6 @@
font-weight: bold;
}
.content__title {
width: 206px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

17
src/components/layout/LeftMenu.vue
View File

@@ -21,7 +21,7 @@
@select="jump">
<template v-for="(menu, index) in menuList">
<el-submenu
v-if="menu.children && menu.children.length > 0"
v-if="menu.children && menu.children.length > 0 && menu.state === 1"
:key="index"
:index="`${index}`">
<template #title>
@@ -29,32 +29,31 @@
<span>{{menu.i18n ? $t(menu.i18n) : menu.name}}</span>
</template>
<template v-for="(secondMenu, secondIndex) in menu.children">
<template v-if="secondMenu.children && secondMenu.children.length > 0">
<el-submenu
v-if="secondMenu.children && secondMenu.children.length > 0 && secondMenu.state === 1"
:key="secondIndex"
:index="`${index}-${secondIndex}`">
<template #title>
<span class="data-column__span">{{secondMenu.i18n ? $t(secondMenu.i18n) : secondMenu.name}}</span>
</template>
<template v-for="(thirdMenu, thirdIndex) in secondMenu.children" :key="`${index}-${secondIndex}-${thirdIndex}`">
<el-menu-item
v-for="(thirdMenu, thirdIndex) in secondMenu.children"
:key="`${index}-${secondIndex}-${thirdIndex}`"
v-if="thirdMenu.state === 1"
:index="thirdMenu.route">
{{thirdMenu.i18n ? $t(thirdMenu.i18n) : thirdMenu.name}}
</el-menu-item>
</el-submenu>
</template>
<template v-else>
</el-submenu>
<el-menu-item
:key="secondIndex"
v-else-if="secondMenu.state === 1"
:key="secondIndex * 100"
:index="secondMenu.route">
{{secondMenu.i18n ? $t(secondMenu.i18n) : secondMenu.name}}
</el-menu-item>
</template>
</template>
</el-submenu>
<el-menu-item
v-else
v-else-if="menu.state === 1"
:key="index + 'a'"
:index="menu.route">
<i :class="menu.icon"></i>

4
src/router/index.js
View File

@@ -25,6 +25,10 @@ const routes = [
{
path: '/operationLog',
component: () => import('@/views/settings/OperationLog')
},
{
path: '/entityExplorer',
component: () => import('@/views/entities/EntityExplorer')
}
]
}

11
src/views/charts/Chart.vue
View File

@@ -78,9 +78,10 @@
v-else-if="isSingleValue"
:type="chartInfo.type"
:style="computePosition"
:icon="singleValue.icon"
>
<template #title><span title="TCP Connection Establish Time">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span></template>
<template #data>{{singleValue}}</template>
<template #data>{{singleValue.value}}</template>
</single-value>
<!-- 表格 -->
<chart-table
@@ -200,7 +201,10 @@ export default {
currentPageData: [] // table当前页的数据
},
pieTableData: [],
singleValue: '-',
singleValue: {
value: '-',
icon: ''
},
activeTab: '',
statisticsData: []
}
@@ -401,10 +405,11 @@ export default {
}
} else if (this.isSingleValue) {
if (chartParams) {
this.singleValue.icon = chartParams.icon
const queryParams = { startTime: parseInt(this.startTime / 1000), endTime: parseInt(this.endTime / 1000) }
get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
if (response.code === 200) {
this.singleValue = response.data.result
this.singleValue.value = response.data.result
}
})
}

13
src/views/entities/EntityExplorer.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
</template>
<script>
export default {
name: 'EntityExplorer'
}
</script>
<style>
</style>