diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss index cf782f8b..e40f699a 100644 --- a/src/assets/css/components/index.scss +++ b/src/assets/css/components/index.scss @@ -46,8 +46,9 @@ @import './components/rightBox/report/builtinReportBox'; @import './views/charts2/panel'; -@import 'views/charts2/networkOverviewLine'; -@import 'views/charts2/networkOverviewDdosDetection'; -@import 'views/charts2/networkOverviewPerformanceEvent'; -@import 'views/charts2/networkOverviewTabs'; +@import './views/charts2/networkOverviewLine'; +@import './views/charts2/networkOverviewDdosDetection'; +@import './views/charts2/networkOverviewPerformanceEvent'; +@import './views/charts2/networkOverviewTabs'; +@import './views/charts2/npmTabs'; //@import '../chart'; diff --git a/src/assets/css/components/views/charts2/npmTabs.scss b/src/assets/css/components/views/charts2/npmTabs.scss new file mode 100644 index 00000000..5ede7050 --- /dev/null +++ b/src/assets/css/components/views/charts2/npmTabs.scss @@ -0,0 +1,38 @@ +.npm-tabs { + .el-tabs--top .el-tabs__item.is-top:nth-child(2) { + padding-left: 20px; + } + .el-tabs--top .el-tabs__item { + padding: 0; + } + .el-tabs__active-bar.is-top { + top: 0; + height: 3px; + border-radius: 5px 2.5px 0 0; + } + .el-tabs__item.is-top { + .npm-tab__label { + padding: 0 20px; + color: #353636; + font-size: 14px; + font-weight: bold; + box-sizing: border-box; + + i { + padding-right: 7px; + font-size: 16px; + font-weight: normal; + } + } + &.is-active { + .npm-tab__label { + color: #353636; + box-shadow: 1px 0 0px 0px #E2E5EC, inset 1px 0 0 #E2E5EC; + + i { + color: #046EC9; + } + } + } + } +} diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css index 811ac432..76385439 100644 --- a/src/assets/css/font/iconfont.css +++ b/src/assets/css/font/iconfont.css @@ -1,8 +1,8 @@ @font-face { font-family: "cn-icon"; /* Project id 2614877 */ - src: url('iconfont.woff2?t=1657871017803') format('woff2'), - url('iconfont.woff?t=1657871017803') format('woff'), - url('iconfont.ttf?t=1657871017803') format('truetype'); + src: url('iconfont.woff2?t=1658116710807') format('woff2'), + url('iconfont.woff?t=1658116710807') format('woff'), + url('iconfont.ttf?t=1658116710807') format('truetype'); } .cn-icon { @@ -13,39 +13,39 @@ -moz-osx-font-smoothing: grayscale; } -.cn-icon-a-SocialNetwork:before { +.cn-icon-social-network:before { content: "\e79b"; } -.cn-icon-Video:before { +.cn-icon-video:before { content: "\e79c"; } -.cn-icon-VoIP:before { +.cn-icon-voip:before { content: "\e79d"; } -.cn-icon-Email:before { +.cn-icon-email:before { content: "\e79e"; } -.cn-icon-Gaming:before { +.cn-icon-gaming:before { content: "\e79f"; } -.cn-icon-a-FileSharing:before { +.cn-icon-file-sharing:before { content: "\e7a0"; } -.cn-icon-Location:before { +.cn-icon-location:before { content: "\e798"; } -.cn-icon-Events:before { +.cn-icon-events:before { content: "\e799"; } -.cn-icon-Overview:before { +.cn-icon-overview:before { content: "\e79a"; } diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js index 5a5ce11b..b9f24386 100644 --- a/src/assets/css/font/iconfont.js +++ b/src/assets/css/font/iconfont.js @@ -1 +1 @@ -!function(a){var c,l,h,o,i,m='',v=(v=document.getElementsByTagName("script"))[v.length-1].getAttribute("data-injectcss"),z=function(a,c){c.parentNode.insertBefore(a,c)};if(v&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function t(){i||(i=!0,h())}function n(){try{o.documentElement.doScroll("left")}catch(a){return void setTimeout(n,50)}t()}c=function(){var a,c=document.createElement("div");c.innerHTML=m,m=null,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(a=document.body).firstChild?z(c,a.firstChild):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),c()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(h=c,o=a.document,i=!1,n(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,t())})}(window); +!function(a){var c,l,h,o,i,m='',v=(v=document.getElementsByTagName("script"))[v.length-1].getAttribute("data-injectcss"),z=function(a,c){c.parentNode.insertBefore(a,c)};if(v&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function t(){i||(i=!0,h())}function n(){try{o.documentElement.doScroll("left")}catch(a){return void setTimeout(n,50)}t()}c=function(){var a,c=document.createElement("div");c.innerHTML=m,m=null,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(a=document.body).firstChild?z(c,a.firstChild):a.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(c,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),c()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(h=c,o=a.document,i=!1,n(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,t())})}(window); \ No newline at end of file diff --git a/src/assets/css/font/iconfont.ttf b/src/assets/css/font/iconfont.ttf index fd962dc4..db557759 100644 Binary files a/src/assets/css/font/iconfont.ttf and b/src/assets/css/font/iconfont.ttf differ diff --git a/src/assets/css/font/iconfont.woff b/src/assets/css/font/iconfont.woff index 1f3e22ea..1d1fa143 100644 Binary files a/src/assets/css/font/iconfont.woff and b/src/assets/css/font/iconfont.woff differ diff --git a/src/assets/css/font/iconfont.woff2 b/src/assets/css/font/iconfont.woff2 index 229e8071..a14e93d3 100644 Binary files a/src/assets/css/font/iconfont.woff2 and b/src/assets/css/font/iconfont.woff2 differ diff --git a/src/components/layout/Header.vue b/src/components/layout/Header.vue index 708459b0..b00f805a 100644 --- a/src/components/layout/Header.vue +++ b/src/components/layout/Header.vue @@ -43,6 +43,8 @@ + + + + diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue index b3c0c15b..84c27b1d 100644 --- a/src/views/charts2/Chart.vue +++ b/src/views/charts2/Chart.vue @@ -17,6 +17,14 @@ + + @@ -28,6 +36,8 @@ import NetworkOverviewLine from '@/views/charts2/charts/NetworkOverviewLine' import NetworkOverviewDdosDetection from '@/views/charts2/charts/NetworkOverviewDdosDetection' import NetworkOverviewPerformanceEvent from '@/views/charts2/charts/NetworkOverviewPerformanceEvent' import NetworkOverviewTabs from '@/views/charts2/charts/NetworkOverviewTabs' +import NpmTabs from '@/views/charts2/charts/NpmTabs' +import NpmNetworkQuantity from '@/views/charts2/charts/NpmNetworkQuantity' export default { name: 'Chart', components: { @@ -36,7 +46,9 @@ export default { NetworkOverviewLine, NetworkOverviewDdosDetection, NetworkOverviewPerformanceEvent, - NetworkOverviewTabs + NetworkOverviewTabs, + NpmTabs, + NpmNetworkQuantity }, props: { chart: Object diff --git a/src/views/charts2/ChartList.vue b/src/views/charts2/ChartList.vue index b0cd796f..b5e7efb1 100644 --- a/src/views/charts2/ChartList.vue +++ b/src/views/charts2/ChartList.vue @@ -19,8 +19,19 @@ :h="item.h" :i="item.i" :key="item.i"> + + @@ -31,17 +42,23 @@ import VueGridLayout from 'vue-grid-layout' import _ from 'lodash' import Chart from '@/views/charts2/Chart' +import { panelTypeAndRouteMapping } from '@/utils/constants' +import { typeMapping } from '@/views/charts2/chart-tools' export default { name: 'ChartList', props: { timeFilter: Object, + panelType: Number, chartList: Array, panelLock: Boolean, entity: Object }, data () { return { - layout: [] + panelTypeAndRouteMapping, + typeMapping, + layout: [], + npmTabIndex: 0 } }, components: { diff --git a/src/views/charts2/Panel.vue b/src/views/charts2/Panel.vue index 7f6c8cf2..fe2e395e 100644 --- a/src/views/charts2/Panel.vue +++ b/src/views/charts2/Panel.vue @@ -22,6 +22,7 @@ ref="chartList" :time-filter="timeFilter" :chart-list="chartList" + :panel-type="panelType" :panel-lock="panelLock" :entity="entity" > diff --git a/src/views/charts2/chart-tools.js b/src/views/charts2/chart-tools.js index 49ee24e5..77112bf4 100644 --- a/src/views/charts2/chart-tools.js +++ b/src/views/charts2/chart-tools.js @@ -5,5 +5,9 @@ export const typeMapping = { performanceEvent: 302, table: 601, ddosDetection: 701 + }, + npm: { + npmTabs: 704, + npmNetworkQuantity: 703 } } diff --git a/src/views/charts2/charts/NpmNetworkQuantity.vue b/src/views/charts2/charts/NpmNetworkQuantity.vue new file mode 100644 index 00000000..91230a9e --- /dev/null +++ b/src/views/charts2/charts/NpmNetworkQuantity.vue @@ -0,0 +1,9 @@ + + + diff --git a/src/views/charts2/charts/NpmTabs.vue b/src/views/charts2/charts/NpmTabs.vue new file mode 100644 index 00000000..a131e6b5 --- /dev/null +++ b/src/views/charts2/charts/NpmTabs.vue @@ -0,0 +1,41 @@ + + +