From 68539bee941448d7cbd84f63d8f531aa91771daf Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Thu, 21 Jul 2022 15:06:19 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Eapp=E7=9A=84=E9=83=A8?= =?UTF-8?q?=E5=88=86=E4=BA=A4=E4=BA=92=E5=92=8C=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/charts2/networkOverviewApps.scss | 107 +- src/components/advancedSearch/TagMode.vue | 1 - src/views/charts/charts/IpBasicInfo.vue | 62 +- .../charts2/charts/NetworkOverviewApps.vue | 948 +++++++++--------- 4 files changed, 603 insertions(+), 515 deletions(-) diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss index 7c91044a..41fec99f 100644 --- a/src/assets/css/components/views/charts2/networkOverviewApps.scss +++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss @@ -72,6 +72,24 @@ border-radius: 4px; display: flex; flex-direction: column; + + &.app-card--create { + background-color: #F7F7F7; + justify-content: center; + align-items: center; + + .cn-icon { + padding-bottom: 2px; + font-size: 17px; + color: #38ACD2; + cursor: pointer; + } + span { + font-size: 12px; + color: #353636; + cursor: pointer; + } + } .app-card-title { display: flex; padding: 0 12px; @@ -112,7 +130,6 @@ } } .app-card__body-content-percent { - font-family: NotoSansHans-Medium; font-size: 12px; font-weight: 500; height: 20px; @@ -144,6 +161,94 @@ } } } + .add-app-drawer { + height: 526px !important; + + .add-app { + display: flex; + flex-direction: column; + height: 100%; + + .add-app__header { + display: flex; + justify-content: space-between; + height: 46px; + background-color: white; + + .header__title { + padding-left: 20px; + font-size: 16px; + font-weight: bold; + line-height: 46px; + color: #353636; + } + .header__operations { + display: flex; + align-items: center; + + .header__operation { + width: 80px; + height: 30px; + margin-right: 20px; + line-height: 30px; + border-radius: 4px; + text-align: center; + cursor: pointer; + + &.header__operation--cancel { + border: 1px solid rgba(0,0,0,0.15); + color: #333; + } + &.header__operation--save { + background-color: #38ACD2; + color: white; + } + } + } + } + .add-app__body { + position: relative; + flex: 1; + background-color: #EBF1F4; + + .body__searcher { + position: absolute; + right: 20px; + top: 15px; + } + .el-tabs__nav-wrap::after { + height: 0; + } + .el-tabs__header { + padding-left: 20px; + } + .body__apps { + height: 420px; + padding: 0 20px; + overflow: auto; + display: grid; + grid-template-rows: repeat(auto-fill, 120px); + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + grid-gap: 20px; + + &::-webkit-scrollbar-thumb { + background-color: #c5c5c5; + border-radius: 5px; + } + &::-webkit-scrollbar-thumb:hover { + background-color: #a0a0a0; + border-radius: 5px; + } + .body__app { + height: 120px; + background: #FFFFFF; + border: 1px solid #E2E5EC; + border-radius: 4px; + } + } + } + } + } } .app-dropdown.el-popper.is-pure { top: 720px !important; diff --git a/src/components/advancedSearch/TagMode.vue b/src/components/advancedSearch/TagMode.vue index 5942c4b2..c7024c0e 100644 --- a/src/components/advancedSearch/TagMode.vue +++ b/src/components/advancedSearch/TagMode.vue @@ -391,7 +391,6 @@ export default { deep: true, handler (n) { if (!_.isEmpty(n)) { - console.info(n) this.metaList = n } } diff --git a/src/views/charts/charts/IpBasicInfo.vue b/src/views/charts/charts/IpBasicInfo.vue index c61cccce..c81f1227 100644 --- a/src/views/charts/charts/IpBasicInfo.vue +++ b/src/views/charts/charts/IpBasicInfo.vue @@ -16,21 +16,11 @@ {{detectionIpSupporting(detectionsData)}} - diff --git a/src/views/charts2/charts/NetworkOverviewApps.vue b/src/views/charts2/charts/NetworkOverviewApps.vue index cd0ef8a5..8027241a 100644 --- a/src/views/charts2/charts/NetworkOverviewApps.vue +++ b/src/views/charts2/charts/NetworkOverviewApps.vue @@ -58,7 +58,45 @@
+
+ + {{$t('overall.add')}} +
+ +
+
+
{{$t('overall.add')}}
+
+
{{$t('overall.cancel')}}
+
{{$t('overall.save')}}
+
+
+
+ + +
+
{{app.name}},{{app.desc}}
+
+ + +
+
{{app.name}},{{app.desc}}
+
+ + +
+ +
+
+
+ @@ -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) }