diff --git a/src/assets/css/components/views/charts/chartSingleValue.scss b/src/assets/css/components/views/charts/chartSingleValue.scss index c845b091..bf4067c1 100644 --- a/src/assets/css/components/views/charts/chartSingleValue.scss +++ b/src/assets/css/components/views/charts/chartSingleValue.scss @@ -345,4 +345,82 @@ } } } + + &.cn-chart__single-value--protocol { + display: flex; + height: 100%; + width: 100%; + justify-content: center; + flex-direction: column; + .single-value__content { + display: flex; + justify-content: center; + .content__data { + display: flex; + flex-direction: column; + } + .content__data-protocol:nth-of-type(1) { + margin-bottom: 50px; + span { + font-size: 14px; + color: #FC8157; + font-weight: 500; + } + } + .content__data-protocol:nth-of-type(2) { + span { + font-size: 14px; + color: #FBA342; + font-weight: 500; + } + } + .content__data-protocol { + display: flex; + height: 68px; + width: 100%; + text-align: center; + .content__data-protocol-icon { + flex-shrink: 0; + display: flex; + justify-content: center; + width: 68px; + height: 100%; + line-height: 68px; + border-radius: 100%; + margin-right: 8px; + } + .content__data-protocol-value { + flex-shrink: 0; + display: flex; + justify-content: center; + flex-direction: column; + text-align: left; + margin-right: 20px; + .content__data-protocol-value-title { + flex-shrink: 0; + display: flex; + margin-bottom: 7px; + font-size: 14px; + color: #666666; + font-weight: 400; + } + .content__data-protocol-value-num { + flex-shrink: 0; + display: flex; + font-size: 28px; + color: #333333; + font-weight: 500; + } + } + .content__data-protocol-percent { + flex-shrink: 0; + display: flex; + font-size: 14px; + color: #666666; + font-weight: 400; + line-height: 95px; + } + } + } + } } diff --git a/src/assets/css/font/iconfont.css b/src/assets/css/font/iconfont.css index ed4822a6..f8a3d566 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=1647594989129') format('woff2'), - url('iconfont.woff?t=1647594989129') format('woff'), - url('iconfont.ttf?t=1647594989129') format('truetype'); + src: url('iconfont.woff2?t=1648624431165') format('woff2'), + url('iconfont.woff?t=1648624431165') format('woff'), + url('iconfont.ttf?t=1648624431165') format('truetype'); } .cn-icon { @@ -13,6 +13,14 @@ -moz-osx-font-smoothing: grayscale; } +.cn-icon-requests:before { + content: "\e76a"; +} + +.cn-icon-traffic:before { + content: "\e76b"; +} + .cn-icon-domain2:before { content: "\e767"; } diff --git a/src/assets/css/font/iconfont.js b/src/assets/css/font/iconfont.js index 7edf9492..51b06a3e 100644 --- a/src/assets/css/font/iconfont.js +++ b/src/assets/css/font/iconfont.js @@ -1 +1 @@ -!function(c){var a,l,h,o,i,m='',v=(v=document.getElementsByTagName("script"))[v.length-1].getAttribute("data-injectcss"),z=function(c,a){a.parentNode.insertBefore(c,a)};if(v&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function t(){i||(i=!0,h())}function n(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(n,50)}t()}a=function(){var c,a=document.createElement("div");a.innerHTML=m,m=null,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(c=document.body).firstChild?z(a,c.firstChild):c.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),a()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(h=a,o=c.document,i=!1,n(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,t())})}(window); \ No newline at end of file +!function(c){var a,l,h,o,i,m='',v=(v=document.getElementsByTagName("script"))[v.length-1].getAttribute("data-injectcss"),z=function(c,a){a.parentNode.insertBefore(c,a)};if(v&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function t(){i||(i=!0,h())}function n(){try{o.documentElement.doScroll("left")}catch(c){return void setTimeout(n,50)}t()}a=function(){var c,a=document.createElement("div");a.innerHTML=m,m=null,(a=a.getElementsByTagName("svg")[0])&&(a.setAttribute("aria-hidden","true"),a.style.position="absolute",a.style.width=0,a.style.height=0,a.style.overflow="hidden",a=a,(c=document.body).firstChild?z(a,c.firstChild):c.appendChild(a))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(a,0):(l=function(){document.removeEventListener("DOMContentLoaded",l,!1),a()},document.addEventListener("DOMContentLoaded",l,!1)):document.attachEvent&&(h=a,o=c.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 54c12903..0bb93b55 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 2adfc108..43416827 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 f5a56093..07b5446e 100644 Binary files a/src/assets/css/font/iconfont.woff2 and b/src/assets/css/font/iconfont.woff2 differ diff --git a/src/views/charts/Chart.vue b/src/views/charts/Chart.vue index d0c5ed15..43cab542 100644 --- a/src/views/charts/Chart.vue +++ b/src/views/charts/Chart.vue @@ -337,7 +337,8 @@ import { isAlarmInfo, isDomainRecursiveResolve, isDetectionSecurity, - isDetectionService + isDetectionService, + isDetectionsProtocol } from './charts/tools' import _ from 'lodash' @@ -503,7 +504,8 @@ export default { isAlarmInfo: isAlarmInfo(props.chartInfo.type), isDomainRecursiveResolve: isDomainRecursiveResolve(props.chartInfo.type), isDetectionSecurity: isDetectionSecurity(props.chartInfo.type), - isDetectionService: isDetectionService(props.chartInfo.type) + isDetectionService: isDetectionService(props.chartInfo.type), + isDetectionsProtocol: isDetectionsProtocol(props.chartInfo.type) } } } diff --git a/src/views/charts/charts/ChartSingleValue.vue b/src/views/charts/charts/ChartSingleValue.vue index 4e725414..56a81515 100644 --- a/src/views/charts/charts/ChartSingleValue.vue +++ b/src/views/charts/charts/ChartSingleValue.vue @@ -4,7 +4,7 @@ :class="singleValueClass(type)" :style="{ backgroundColor: color }" > -
+
+
+
+
+ +
+
+
{{$t('protocol.requestVolume')}}
+
{{unitConvert($_.get(chartData, 'bytes'), chartInfo.params.unitType).join(' ')}}
+
+
占比   {{unitConvert($_.get(chartData, 'bytesPercent') * 100, unitTypes.percent).join(' ')+'%' }}
+
+
+
+ +
+
+
{{$t('protocol.totalFlow')}}
+
{{unitConvert($_.get(chartData, 'count'), chartInfo.params.unitType).join(' ')}}
+
+
占比   {{ unitConvert($_.get(chartData, 'countPercent') * 100, unitTypes.percent).join(' ')+'%' }}
+
+
+