From 3a61caa67e69a8a469f10ba5615a6d29f0e06a0f Mon Sep 17 00:00:00 2001 From: "@changcode" Date: Tue, 19 Jul 2022 17:53:22 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20appList=E7=BB=84=E4=BB=B6=E5=BC=80?= =?UTF-8?q?=E5=8F=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/charts2/networkOverviewApps.scss | 105 +++- .../charts2/charts/NetworkOverviewApps.vue | 536 +++++++++++++++++- .../charts2/charts/options/echartOption.js | 43 +- 3 files changed, 679 insertions(+), 5 deletions(-) diff --git a/src/assets/css/components/views/charts2/networkOverviewApps.scss b/src/assets/css/components/views/charts2/networkOverviewApps.scss index a5d68f6c..7c91044a 100644 --- a/src/assets/css/components/views/charts2/networkOverviewApps.scss +++ b/src/assets/css/components/views/charts2/networkOverviewApps.scss @@ -68,9 +68,112 @@ height: calc(100% - 24px); .app-card { - height: 100%; border: 1px solid #E2E5EC; 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; + } +} diff --git a/src/views/charts2/charts/NetworkOverviewApps.vue b/src/views/charts2/charts/NetworkOverviewApps.vue index 0a5aa2ba..cd0ef8a5 100644 --- a/src/views/charts2/charts/NetworkOverviewApps.vue +++ b/src/views/charts2/charts/NetworkOverviewApps.vue @@ -15,24 +15,554 @@
-
- +
+
+
+ + {{app.name}} +
+ + + + + + + + +
+
+
+
+
+
{{unitConvert(app.number, unitTypes.number).join(' ')}}
+
+
+ +-{{unitConvert(app.value, unitTypes.percent).join('')}} +
+
+
+
+
+
previous 24 hours
+
{{unitConvert(app.number1, unitTypes.number).join(' ')}}
+
+
+
+
diff --git a/src/views/charts2/charts/options/echartOption.js b/src/views/charts2/charts/options/echartOption.js index ad166ff2..72d554b1 100644 --- a/src/views/charts2/charts/options/echartOption.js +++ b/src/views/charts2/charts/options/echartOption.js @@ -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 * as echarts from 'echarts' +import { axisFormatter } from '@/views/charts/charts/tools' export const pieChartOption1 = { 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) { const totalData = stackedLineChartOption.series[0].data.find(t => t[0] === time) // [time, value] const inboundData = stackedLineChartOption.series[1].data.find(t => t[0] === time)