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

feat: appList组件开发

Browse Source
This commit is contained in:
@changcode
2022-07-19 17:53:22 +08:00
parent f35a53f512
commit 3a61caa67e
3 changed files with 679 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/assets/css/components/views/charts2/networkOverviewApps.scss
View File

@@ -68,9 +68,112 @@
height: calc(100% - 24px); height: calc(100% - 24px);
.app-card { .app-card {
height: 100%;
border: 1px solid #E2E5EC; border: 1px solid #E2E5EC;
border-radius: 4px; border-radius: 4px;
display: flex;
flex-direction: column;
.app-card-title {
display: flex;
padding: 0 12px;
margin-top: 10px;
justify-content: space-between;
.app-card-title-name {
font-size: 12px;
color: #353636;
font-weight: 400;
span .cn-icon {
font-size: 12px;
margin-right: 4px;
}
}
}
.app-card__bodys {
display: flex;
margin-top: 4px;
flex: 1;
}
.app-card__body {
flex: 1;
padding-left: 12px;
display: flex;
flex-direction: column;
}
.app-card__body-content {
display: flex;
margin-bottom: 6px;
.app-card__body-content-value {
display: flex;
.app-card__body-content-number {
font-family: Helvetica-Bold;
font-size: 20px;
color: #353636;
font-weight: 700;
margin-right: 28px;
}
}
.app-card__body-content-percent {
font-family: NotoSansHans-Medium;
font-size: 12px;
font-weight: 500;
height: 20px;
width: 68px;
line-height: 20px;
border-radius: 10px;
display: flex;
justify-content: center;
position: relative;
top: 50%;
color: #fff;
margin-top: -10px;
}
.app-card__body-content-percent.red {
background-color: rgb(226, 97, 84);
}
.app-card__body-content-percent.green {
background-color: rgb(126, 159, 84);
}
}
.app-card__body-previous {
display: flex;
font-size: 12px;
color: #353636;
font-weight: 400;
}
.chart__drawing {
flex: 1;
}
} }
} }
} }
.app-dropdown.el-popper.is-pure {
top: 720px !important;
.el-scrollbar {
.el-scrollbar__wrap {
.el-scrollbar__view.el-dropdown__list {
padding: 0;
margin: 0;
.el-dropdown-menu {
padding: 0;
.el-dropdown-menu__item {
padding-left: 5px;
max-height: 25px;
min-width: 80px;
line-height: 25px;
font-size: 12px;
font-family: Helvetica-Bold;
color: #353636;
font-weight: 400;
i {
color: #353636;
font-size: 12px;
}
}
}
}
}
}
.el-popper__arrow {
display: none;
}
}

536
src/views/charts2/charts/NetworkOverviewApps.vue
View File

@@ -15,24 +15,554 @@
</div> </div>
</div> </div>
<div class="app-cards"> <div class="app-cards">
<div class="app-card" v-for="(app, index) in chart.params.app" :key="index"> <div class="app-card" v-for="(app, index) in appData" :key="index">
<div class="app-card-title">
<div class="app-card-title-name">
<span><i class="cn-icon cn-icon-social-network"></i></span>
<span>{{app.name}}</span>
</div>
<el-row class="block-col-2">
<el-col>
<el-dropdown
trigger="click"
placement="bottom-end"
popper-class="app-dropdown"
>
<span><i class="cn-icon cn-icon-more-dark"></i></span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item><span><i class="cn-icon cn-icon-delete"></i>{{$t('overall.delete')}}</span></el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-col>
</el-row>
</div>
<div class="app-card__bodys">
<div class="app-card__body">
<div class="app-card__body-content">
<div class="app-card__body-content-value">
<div class="app-card__body-content-number">{{unitConvert(app.number, unitTypes.number).join(' ')}}</div>
<div class="app-card__body-content-percent" :class="app.trend === 'up' ? 'red' : 'green'">
<div>
<span v-if="app.trend === 'up'">+</span><span v-else-if="app.trend === 'down'">-</span>{{unitConvert(app.value, unitTypes.percent).join('')}}
</div>
</div>
</div>
</div>
<div class="app-card__body-previous">
<div>previous 24 hours</div>
<div>{{unitConvert(app.number1, unitTypes.number).join(' ')}}</div>
</div>
</div>
<div class="chart__drawing" :id="`chart${app.name}`"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import unitConvert from '@/utils/unit-convert'
import { unitTypes } from '@/utils/constants'
import * as echarts from 'echarts'
import { appListChartOption } from '@/views/charts2/charts/options/echartOption'
import { shallowRef } from 'vue'
export default { export default {
name: 'NetworkOverviewApps', name: 'NetworkOverviewApps',
props: { props: {
chart: Object chart: Object
}, },
setup () {
return {
myChart: shallowRef(null)
}
},
data () { data () {
return { return {
metricFilter: '', metricFilter: '',
metricOptions: [] metricOptions: [],
chartOption: [],
appData: [
{ value: 1.3912, number: 684600000000, previous: 24, number1: 3675, trend: 'down', icon: 'cn-icon-mining-pool' },
{ value: 1.8934, number: 382100000000, previous: 24, number1: 3675, trend: 'up', icon: 'cn-icon-fraudulent-ip' },
{ value: 1.2054, number: 184600000000, previous: 24, number1: 3675, trend: 'up', icon: 'cn-icon-debug' },
{ value: 1.2506, number: 584800000000, previous: 24, number1: 3675, trend: 'down', icon: 'cn-icon-language' },
{ value: 1.6415, number: 734100000000, previous: 24, number1: 3675, trend: 'down', icon: 'cn-icon-authoritative-domain' }
],
unitTypes,
unitConvert,
timer: null,
showEdit: ''
} }
},
methods: {
init (obj) {
const dom = document.getElementById(`chart${obj.name}`)
this.myChart = echarts.init(dom)
this.chartOption = appListChartOption
const result = [
{
values: [
[
'1658128320',
'0'
],
[
'1658129184',
'0'
],
[
'1658130048',
'0'
],
[
'1658130912',
'0'
],
[
'1658131776',
'0'
],
[
'1658132640',
'0'
],
[
'1658133504',
'0'
],
[
'1658134368',
'0'
],
[
'1658135232',
'0'
],
[
'1658136096',
'0'
],
[
'1658136960',
'0'
],
[
'1658137824',
'0'
],
[
'1658138688',
'0'
],
[
'1658139552',
'0'
],
[
'1658140416',
'0'
],
[
'1658141280',
'0'
],
[
'1658142144',
'0'
],
[
'1658143008',
'0'
],
[
'1658143872',
'0'
],
[
'1658144736',
'1'
],
[
'1658145600',
'0'
],
[
'1658146464',
'0'
],
[
'1658147328',
'0'
],
[
'1658148192',
'0'
],
[
'1658149056',
'0'
],
[
'1658149920',
'0'
],
[
'1658150784',
'0'
],
[
'1658151648',
'0'
],
[
'1658152512',
'0'
],
[
'1658153376',
'0'
],
[
'1658154240',
'1'
],
[
'1658155104',
'0'
],
[
'1658155968',
'0'
],
[
'1658156832',
'0'
],
[
'1658157696',
'0'
],
[
'1658158560',
'0'
],
[
'1658159424',
'0'
],
[
'1658160288',
'0'
],
[
'1658161152',
'0'
],
[
'1658162016',
'0'
],
[
'1658162880',
'0'
],
[
'1658163744',
'0'
],
[
'1658164608',
'0'
],
[
'1658165472',
'0'
],
[
'1658166336',
'0'
],
[
'1658167200',
'0'
],
[
'1658168064',
'0'
],
[
'1658168928',
'0'
],
[
'1658169792',
'0'
],
[
'1658170656',
'0'
],
[
'1658171520',
'0'
],
[
'1658172384',
'0'
],
[
'1658173248',
'0'
],
[
'1658174112',
'0'
],
[
'1658174976',
'0'
],
[
'1658175840',
'0'
],
[
'1658176704',
'0'
],
[
'1658177568',
'0'
],
[
'1658178432',
'0'
],
[
'1658179296',
'0'
],
[
'1658180160',
'0'
],
[
'1658181024',
'0'
],
[
'1658181888',
'0'
],
[
'1658182752',
'0'
],
[
'1658183616',
'0'
],
[
'1658184480',
'0'
],
[
'1658185344',
'0'
],
[
'1658186208',
'0'
],
[
'1658187072',
'0'
],
[
'1658187936',
'0'
],
[
'1658188800',
'0'
],
[
'1658189664',
'0'
],
[
'1658190528',
'0'
],
[
'1658191392',
'0'
],
[
'1658192256',
'0'
],
[
'1658193120',
'0'
],
[
'1658193984',
'0'
],
[
'1658194848',
'0'
],
[
'1658195712',
'0'
],
[
'1658196576',
'0'
],
[
'1658197440',
'0'
],
[
'1658198304',
'0'
],
[
'1658199168',
'0'
],
[
'1658200032',
'0'
],
[
'1658200896',
'0'
],
[
'1658201760',
'0'
],
[
'1658202624',
'0'
],
[
'1658203488',
'0'
],
[
'1658204352',
'0'
],
[
'1658205216',
'0'
],
[
'1658206080',
'0'
],
[
'1658206944',
'0'
],
[
'1658207808',
'0'
],
[
'1658208672',
'0'
],
[
'1658209536',
'0'
],
[
'1658210400',
'0'
],
[
'1658211264',
'0'
],
[
'1658212128',
'0'
],
[
'1658212992',
'0'
],
[
'1658213856',
'0'
],
[
'1658214720',
'0'
]
]
}
]
const seriesTemplate = this.chartOption.series[0]
this.chartOption.series = result.map((r, i) => {
return {
...seriesTemplate,
data: r.values.map((v) => [Number(v[0]) * 1000, Number(v[1]), 'time']),
lineStyle: {
color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
},
areaStyle: {
opacity: 0.1,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
},
{
offset: 1,
color: obj.trend === 'up' ? '#7FA054' : '#35ADDA'
}
])
}
}
})
this.myChart.setOption(this.chartOption)
},
resize () {
this.myChart.resize()
},
editChange () {
this.showEdit = !this.showEdit
}
},
mounted () {
if (this.chart.params.app) {
this.appData = this.appData.map((e, i) => {
return {
name: this.chart.params.app[i],
value: e.value,
number: e.number,
previous: e.previous,
number1: e.number1,
trend: e.trend
}
})
}
this.timer = setTimeout(() => {
this.appData.forEach(t => {
this.appName = t.name
this.init(t)
})
}, 100)
window.addEventListener('resize', this.resize)
} }
} }
</script> </script>

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

@@ -1,6 +1,7 @@
import { chartColor1, chartColor2, chartColor3, chartColor4, unitTypes } from '@/utils/constants' import { chartColor, chartColor1, chartColor2, chartColor3, chartColor4, unitTypes } from '@/utils/constants'
import unitConvert from '@/utils/unit-convert' import unitConvert from '@/utils/unit-convert'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { axisFormatter } from '@/views/charts/charts/tools'
export const pieChartOption1 = { export const pieChartOption1 = {
color: chartColor1, color: chartColor1,
@@ -344,6 +345,46 @@ export const stackedLineChartOption = {
} }
] ]
} }
export const appListChartOption = {
tooltip: {
appendToBody: true,
trigger: 'axis',
formatter: axisFormatter,
show: true
},
xAxis: {
show: false,
type: 'time'
},
yAxis: {
show: false,
type: 'value',
axisLabel: {
formatter: function (value) {
return unitConvert(value, unitTypes.number, null, null, 0).join(' ')
}
}
},
grid: {
left: 0,
right: 0
},
animation: false,
color: chartColor,
axisLabel: {},
series: [
{
name: '',
type: 'line',
smooth: false,
symbol: 'none',
data: [],
markLine: {}
}
]
}
function symbolSizeSortChange (index, time) { function symbolSizeSortChange (index, time) {
const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value] const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value]
const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time) const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)