diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss index cfdd8149..97003e48 100644 --- a/src/assets/css/components/index.scss +++ b/src/assets/css/components/index.scss @@ -49,4 +49,5 @@ @import 'views/charts/NetworkOverviewLine'; @import 'views/charts/NetworkOverviewDdosDetection'; @import 'views/charts/NetworkOverviewPerformanceEvent'; +@import 'views/charts2/networkOverviewTabs'; //@import '../chart'; diff --git a/src/assets/css/components/views/charts2/networkOverviewTabs.scss b/src/assets/css/components/views/charts2/networkOverviewTabs.scss new file mode 100644 index 00000000..d0947529 --- /dev/null +++ b/src/assets/css/components/views/charts2/networkOverviewTabs.scss @@ -0,0 +1,110 @@ +.tabs { + height:100%; + .cn-chart__tabs { + height:100%; + background-color:white; + .tab-pane { + height:100%; + border: 1px solid #e4e7ed; + padding:1px; + border-radius: 5px; + .tab-table { + color:#484949; + font-size:12px; + border:0px; + } + .data-total{ + display: flex !important; + } + .data-total-trend { + display: flex; + margin-left: 10px; + align-items: center; + justify-content: center; + margin-top: 2px; + } + .data-total-trend-black { + background-color: #ededed; + border-radius: 18px; + width: 36px; + height: 18px; + } + .data-total-trend-green { + background-color: #eef2e8; + border-radius: 25px; + width: 50px; + height: 18px; + color:#94b072; + } + .data-total-trend-red { + background-color: #fbebe9; + border-radius: 25px; + width: 50px; + height: 18px; + color:#e97367; + } + .el-table--group::after,.el-table--border::after, .el-table::before { + height: 0px; + } + } + .el-tabs__nav-wrap::after { + height: 1px; + background-color: white ; + } + &>.el-tabs__header { + margin-bottom: 10px; + } + .el-tabs__nav.is-top { + margin-left:8px; + .el-tabs__active-bar { + display: none; + } + .el-tabs__item { + padding: 0 8px; + font-size:12px; + font-weight: bold; + color:#838383; + } + .el-tabs__item.is-top.is-active { + border-bottom: 2px solid #0091ff; + color:#0091ff; + height: 35px; + } + } + &>.el-tabs__content { + height: calc(100% - 40px); + border:none; + } + } + .tab-search { + position:absolute; + right:20px; + height:40px; + top:0px; + display:flex; + font-size:12px; + align-items: center; + .search-select { + margin-right:10px; + .option__select.select-column { + .el-input__inner { + width: 86px; + padding-left: 8px; + color:#2C72C6; + font-weight:400; + } + } + .option-popper { + .el-select-dropdown__item { + height: 24px; + line-height: 24px; + font-size: 12px; + } + } + + } + .search-customize-tab { + color:#69a7de; + } + } +} diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css index 0cd15361..f9a94c68 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=1653978200371') format('woff2'), - url('iconfont.woff?t=1653978200371') format('woff'), - url('iconfont.ttf?t=1653978200371') format('truetype'); + src: url('iconfont.woff2?t=1657611740064') format('woff2'), + url('iconfont.woff?t=1657611740064') format('woff'), + url('iconfont.ttf?t=1657611740064') format('truetype'); } .cn-icon { @@ -13,6 +13,94 @@ -moz-osx-font-smoothing: grayscale; } +.cn-icon-Detection:before { + content: "\e792"; +} + +.cn-icon-Entity:before { + content: "\e793"; +} + +.cn-icon-Case:before { + content: "\e794"; +} + +.cn-icon-Hunt:before { + content: "\e795"; +} + +.cn-icon-Report1:before { + content: "\e796"; +} + +.cn-icon-a-KnowledgeBase:before { + content: "\e797"; +} + +.cn-icon-constant:before { + content: "\e78f"; +} + +.cn-icon-decline:before { + content: "\e790"; +} + +.cn-icon-rise1:before { + content: "\e791"; +} + +.cn-icon-sort:before { + content: "\e78c"; +} + +.cn-icon-a-NetworkAnalytics:before { + content: "\e786"; +} + +.cn-icon-navigation:before { + content: "\e787"; +} + +.cn-icon-up:before { + content: "\e788"; +} + +.cn-icon-left:before { + content: "\e789"; +} + +.cn-icon-a-NetworkPerformanceEvent:before { + content: "\e78a"; +} + +.cn-icon-refresh1:before { + content: "\e78b"; +} + +.cn-icon-a-DDosDetection:before { + content: "\e78d"; +} + +.cn-icon-Setting1:before { + content: "\e78e"; +} + +.cn-icon-add1:before { + content: "\e783"; +} + +.cn-icon-down:before { + content: "\e784"; +} + +.cn-icon-right:before { + content: "\e785"; +} + +.cn-icon-Data:before { + content: "\e782"; +} + .cn-icon-a-:before { content: "\e77b"; } diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js index a67cfcf9..7c1754c2 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); \ No newline at end of file +!(function (a) { let c; let l; let h; let o; let i; let m = ''; var v = (v = document.getElementsByTagName('script'))[v.length - 1].getAttribute('data-injectcss'); const 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 () { let a; let 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 () { o.readyState == 'complete' && (o.onreadystatechange = null, t()) }) }(window)) diff --git a/src/assets/css/font/iconfont.ttf b/src/assets/css/font/iconfont.ttf index aa09c03a..3519c6ad 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 e824aef7..bae0ffd4 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 2b9f4a1f..88e90806 100644 Binary files a/src/assets/css/font/iconfont.woff2 and b/src/assets/css/font/iconfont.woff2 differ diff --git a/src/utils/constants.js b/src/utils/constants.js index de84ad96..86171f56 100644 --- a/src/utils/constants.js +++ b/src/utils/constants.js @@ -153,6 +153,18 @@ export const listScrollPath = [ '/detection/securityEvent' ] +export const networkOverviewTable = [ + 'network.categories', + 'network.providers', + 'network.countries', + 'network.applications', + 'network.clientIps', + 'network.serverIps', + 'network.protocols', + 'network.hosts', + 'network.snis' +] + export const dnsServerRole = { RTDNS: 'RTDNS', TLDNS: 'TLDNS', diff --git a/src/views/charts2/Chart.vue b/src/views/charts2/Chart.vue index b1af4993..4f14d758 100644 --- a/src/views/charts2/Chart.vue +++ b/src/views/charts2/Chart.vue @@ -14,6 +14,9 @@ v-else-if="chart.type === typeMapping.networkOverview.performanceEvent" :chart="chart" > + @@ -24,6 +27,7 @@ import { typeMapping } from '@/views/charts2/chart-tools' 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' export default { name: 'Chart', components: { @@ -31,7 +35,8 @@ export default { ChartNoData, NetworkOverviewLine, NetworkOverviewDdosDetection, - NetworkOverviewPerformanceEvent + NetworkOverviewPerformanceEvent, + NetworkOverviewTabs }, props: { chart: Object diff --git a/src/views/charts2/charts/NetworkOverviewTabs.vue b/src/views/charts2/charts/NetworkOverviewTabs.vue new file mode 100644 index 00000000..1fa8e7b6 --- /dev/null +++ b/src/views/charts2/charts/NetworkOverviewTabs.vue @@ -0,0 +1,254 @@ + +