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

CN-626 feat: Dashboard - network overview - 折线图开发

Browse Source
This commit is contained in:
@changcode
2022-07-21 10:19:03 +08:00
parent f1f07c6be4
commit f10d0d6d2a
5 changed files with 1686 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/assets/css/components/views/charts2/networkOverviewLine.scss
View File

@@ -14,7 +14,7 @@
.cn-chart-tooltip-value.cn-chart-tooltip__color {
font-size: 12px;
color: #353636;
line-height: 12px;
line-height: 21px;
font-weight: 600;
}
}
@@ -82,15 +82,28 @@
margin-left: 20px;
}
}
.line-value-active {
position: absolute;
height: 3px;
border-radius: 4px 0 0 0;
background: #046ECA;
top: 0;
z-index: 1;
transition: all linear .2s;
}
.line-value {
position: absolute;
top: 20px;
left: 27px;
top: 0;
left: 0;
display: flex;
.line-value-mpackets.mousemove-cursor {
border-top: 4px solid #D3D0D8;
z-index: 0;
}
.line-value-mpackets {
margin-right: 30px;
display: flex;
flex-direction: column;
cursor: pointer;
padding: 16px 0 0 20px;
border-top: 4px solid transparent;
span:nth-of-type(1) {
font-family: Helvetica-Bold;
font-size: 28px;
@@ -102,12 +115,6 @@
color: #575757;
font-weight: 400;
}
.table-below-box--inactivated.line-value-mpackets-name {
color: #ccc;
div:nth-of-type(1) {
background-color: #ccc !important;
}
}
.line-value-mpackets-name {
position: relative;
display: flex;
@@ -115,7 +122,7 @@
flex: 1;
padding-left: 19px;
}
.total,.inbound,.outbound,.internal,.other {
.total,.inbound,.outbound,.internal,.through,.other {
width: 14px;
height: 14px;
border-radius: 50%;
@@ -135,6 +142,9 @@
.internal {
background: #E48F3E;
}
.through {
background: #9FBC1D;
}
.other {
background: #98709B;
}
@@ -142,3 +152,33 @@
}
}
}
.el-select__popper.metric {
top: 218px !important;
.el-popper__arrow {
display: none;
}
}
.reference-line.el-select__popper {
left: 1545px !important;
}
.option-popper.el-select-dropdown {
.el-scrollbar {
.el-select-dropdown__wrap {
.el-scrollbar__view.el-select-dropdown__list {
.el-select-dropdown__item {
padding: 0 8px;
font-family: Helvetica;
height: 24px;
line-height: 24px;
font-size: 12px;
color: #575757;
font-weight: 400;
}
.el-select-dropdown__item:hover {
color: #2C72C6;
background: #fff;
}
}
}
}
}

6
src/assets/css/components/views/charts2/networkOverviewTabs.scss
View File

@@ -128,3 +128,9 @@
}
}
}
.metric-select.el-select__popper {
top: 27px !important;
.el-popper__arrow {
display: none;
}
}

1966
src/views/charts2/charts/NetworkOverviewLine.vue
View File

File diff suppressed because it is too large Load Diff

2
src/views/charts2/charts/NetworkOverviewTabs.vue
View File

@@ -58,7 +58,7 @@
<el-select v-model="metric"
class="option__select select-column"
placeholder=""
popper-class="option-popper"
popper-class="option-popper metric-select"
:popper-append-to-body="false"
size="mini">
<el-option

193
src/views/charts2/charts/options/echartOption.js
View File

@@ -1,6 +1,5 @@
import { chartColor, chartColor1, chartColor2, chartColor3, chartColor4, unitTypes } from '@/utils/constants'
import { chartColor, chartColor1, chartColor2, chartColor3, unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert'
import * as echarts from 'echarts'
import { axisFormatter } from '@/views/charts/charts/tools'
export const pieChartOption1 = {
@@ -111,7 +110,6 @@ export const pieChartOption2 = {
}
]
}
const sizes = [3, 6, 8, 9, 10]
export const stackedLineChartOption = {
color: chartColor3,
tooltip: {
@@ -156,191 +154,12 @@ export const stackedLineChartOption = {
{
type: 'line',
symbol: 'circle',
stack: 'network.total',
smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(0, value[0])
},
showSymbol: false,
emphasis: {
focus: 'series'
},
lineStyle: {
color: chartColor3[0],
width: 1
},
itemStyle: {
emphasis: {
borderColor: chartColor4[0],
borderWidth: 2,
shadowColor: chartColor4[0],
shadowBlur: sizes[0] + 2
}
},
areaStyle: {
opacity: 0.1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: chartColor3[0]
},
{
offset: 1,
color: chartColor3[0]
}
])
},
data: []
},
{
type: 'line',
symbol: 'circle',
smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(1, value[0])
},
showSymbol: false,
emphasis: {
focus: 'series'
},
lineStyle: {
color: chartColor3[1],
width: 1
},
itemStyle: {
emphasis: {
borderColor: chartColor4[1],
borderWidth: 2,
shadowColor: chartColor4[1],
shadowBlur: sizes[1] + 2
}
},
areaStyle: {
opacity: 0.1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: chartColor3[1]
},
{
offset: 1,
color: chartColor3[1]
}
])
},
data: []
},
{
type: 'line',
symbol: 'circle',
smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(2, value[0])
},
showSymbol: false,
emphasis: {
focus: 'series'
},
lineStyle: {
color: chartColor3[2],
width: 1
},
itemStyle: {
emphasis: {
borderColor: chartColor4[2],
borderWidth: 2,
shadowColor: chartColor4[2],
shadowBlur: sizes[2] + 2
}
},
areaStyle: {
opacity: 0.1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: chartColor3[2]
},
{
offset: 1,
color: chartColor3[2]
}
])
},
data: []
},
{
type: 'line',
symbol: 'circle',
smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(3, value[0])
},
showSymbol: false,
emphasis: {
focus: 'series'
},
lineStyle: {
color: chartColor3[3],
width: 1
},
itemStyle: {
emphasis: {
borderColor: chartColor4[3],
borderWidth: 2,
shadowColor: chartColor4[3],
shadowBlur: sizes[3] + 2
}
},
areaStyle: {
opacity: 0.1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: chartColor3[3]
},
{
offset: 1,
color: chartColor3[3]
}
])
},
data: []
},
{
type: 'line',
symbol: 'circle',
smooth: true,
symbolSize: function (value, params) {
return symbolSizeSortChange(4, value[0])
},
showSymbol: false,
emphasis: {
focus: 'series'
},
lineStyle: {
color: chartColor3[4],
width: 1
},
itemStyle: {
emphasis: {
borderColor: chartColor4[4],
borderWidth: 2,
shadowColor: chartColor4[4],
shadowBlur: sizes[4] + 2
}
},
areaStyle: {
opacity: 0.1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: chartColor3[4]
},
{
offset: 1,
color: chartColor3[4]
}
])
},
data: []
}
]
@@ -390,13 +209,15 @@ function symbolSizeSortChange (index, time) {
const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)
const outboundData = stackedLineChartOption.series[2].data.find(t => t[0] === time)
const internalData = stackedLineChartOption.series[3].data.find(t => t[0] === time)
const otherData = stackedLineChartOption.series[4].data.find(t => t[0] === time)
const throughData = stackedLineChartOption.series[4].data.find(t => t[0] === time)
const otherData = stackedLineChartOption.series[5].data.find(t => t[0] === time)
totalData[2] = 0
inboundData[2] = 1
outboundData[2] = 2
internalData[2] = 3
otherData[2] = 4
const dataIntegrationArray = [totalData, inboundData, outboundData, internalData, otherData]
throughData[2] = 4
otherData[2] = 5
const dataIntegrationArray = [totalData, inboundData, outboundData, internalData, throughData, otherData]
dataIntegrationArray.sort((a, b) => { return a[1] - b[1] })
const sortIndex = dataIntegrationArray.findIndex(a => a[2] === index)
return sizes[sortIndex]