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

feat: 新增app的部分交互和样式

Browse Source
This commit is contained in:
chenjinsong
2022-07-21 15:06:19 +08:00
parent 556ddfb95e
commit 68539bee94
4 changed files with 603 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,7 +58,45 @@
<div class="chart__drawing" :id="`chart${app.name}`"></div>
</div>
</div>
<div class="app-card app-card--create">
<i class="cn-icon cn-icon-add1" @click="addApp"></i>
<span @click="addApp">{{$t('overall.add')}}</span>
</div>
</div>
<el-drawer
v-model="showAddApp"
direction="btt"
custom-class="add-app-drawer"
:with-header="false"
:show-close="false"
>
<div class="add-app">
<div class="add-app__header">
<div class="header__title">{{$t('overall.add')}}</div>
<div class="header__operations">
<div class="header__operation header__operation--cancel">{{$t('overall.cancel')}}</div>
<div class="header__operation header__operation--save">{{$t('overall.save')}}</div>
</div>
</div>
<div class="add-app__body">
<el-tabs v-model="appTypeTab">
<el-tab-pane :label="$t('networkOverview.appType.provider')" :name="0">
<div class="body__apps">
<div class="body__app" v-for="app in providerOptions" :key="app.name">{{app.name}},{{app.desc}}</div>
</div>
</el-tab-pane>
<el-tab-pane :label="$t('networkOverview.appType.app')" :name="1">
<div class="body__apps">
<div class="body__app" v-for="app in appOptions" :key="app.name">{{app.name}},{{app.desc}}</div>
</div>
</el-tab-pane>
</el-tabs>
<div class="body__searcher">
<el-input size="mini"></el-input>
</div>
</div>
</div>
</el-drawer>
</div>
</template>
@@ -83,7 +121,9 @@ export default {
metricFilter: '',
metricOptions: [],
chartOption: [],
appData: [
appData: [],
// 假数据
appTempData: [
{ 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' },
@@ -91,476 +131,480 @@ export default {
{ value: 1.6415, number: 734100000000, previous: 24, number1: 3675, trend: 'down', icon: 'cn-icon-authoritative-domain' }
],
unitTypes,
unitConvert,
timer: null,
showEdit: ''
showAddApp: false,
// add弹框中的可选项
providerOptions: [],
appOptions: [],
appTypeTab: 0
}
},
methods: {
init (obj) {
unitConvert,
init () {
this.appData.forEach((app, i) => {
// 根据app.name和app.type查除接口，获取数据
this.appData[i] = { ...app, ...this.appTempData[i] }
this.appData[i].lineData = [
[
'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'
]
].map(v => [Number(v[0]) * 1000, Number(v[1]), 'time'])
this.initChart(app)
})
},
initChart (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.chartOption.series = [{
...seriesTemplate,
data: obj.lineData,
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)
},
addApp () {
this.showAddApp = true
const letter = 'abcdefghijklmnopqrstuvwxyz'
for (let i = 0; i < 100; i++) {
this.appOptions.push({
name: letter[i % 26] + i,
desc: 'this is a really nice app'
})
this.providerOptions.push({
name: letter[i % 26] + i,
desc: 'this is a really nice provider'
})
}
},
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.appData = this.chart.params.app
}
this.timer = setTimeout(() => {
this.appData.forEach(t => {
this.appName = t.name
this.init(t)
})
this.init()
}, 100)
window.addEventListener('resize', this.resize)
}