CN-444 单值图增加分位值

2022-04-01 18:21:17 +08:00
parent 203985b556
commit 135f5c2d6d
5 changed files with 384 additions and 40 deletions
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ b/src/assets/css/components/views/charts/chartSingleValue.scss
@@ -434,4 +434,241 @@
      }
    }
  }
+
+  &.cn-chart__single-value--percentile-right {
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    height: 100%;
+    width: unset;
+    flex: 0 0 270px;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+
+    .single-value-icon__box {
+      display: flex;
+      align-items: center;
+      justify-content: left;
+      margin-right: 12px;
+      flex: 0 0 80;
+    }
+
+    .single-value__icon {
+      display: flex;
+      justify-content: center;
+      width: 56px;
+      height: 56px;
+      background-color: $--chart-single-value-icon-background-color;
+      border-radius: 50%;
+
+      i {
+        display: flex;
+        align-items: center;
+        font-size: 28px;
+        color: $--color-primary;
+      }
+    }
+
+    .single-value__content {
+      display: flex;
+      flex-direction: column;
+      max-width: 60%;
+      padding-right: 10px;
+
+      .data__title-in-one {
+        display:flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      .content__data {
+        margin-bottom: 7%;
+        font-size: 16px;
+        color: #333333;
+        font-weight: bold;
+      }
+
+      .content__title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px !important;
+        color: #7e8081;
+        margin-bottom: 7%;
+        padding: 5px 6px 5px 5px;
+      }
+
+      .title-background-color {
+        background-color: #EFF6FE;
+        border-radius: 4px;
+      }
+
+      .content__percentile {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        color: #666666;
+        display:flex;
+        flex-direction: row;
+
+        .circle__content {
+          display:flex;
+          flex-display:row;
+          margin-right:15px;
+
+          .percentile__title-color {
+            color:#9b9b9b
+          }
+        }
+      }
+
+      .circle {
+        position: relative;
+        width: 6px;
+        height: 6px;
+        line-height: 6px;
+        border-radius: 50%;
+        -moz-border-radius: 50%;
+        margin: auto;
+        margin-right: 4px;
+        z-index: 1;
+      }
+
+      .circle.circle-p50 {
+        background: #ffa200;
+
+      }
+      .circle.circle-p90 {
+        background: #23bf9a;
+      }
+
+      &.single-value__content--with-chart {
+        .content__title {
+          border-bottom: 1px solid $--content-right-background-color;
+        }
+      }
+
+      .single-value__unit {
+        font-weight: normal;
+        padding-right: 10px;
+        color: #333333;
+        font-size: 14px;
+        font-weight: bold;
+      }
+    }
+  }
+
+  &.cn-chart__single-value--percentile-left {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+    width: unset;
+
+    .single-value-icon__box {
+      display: flex;
+      align-items: flex-start;
+      justify-content: right;
+      margin-right:25px;
+      flex: 0 0 80;
+      margin-bottom: 25px;
+    }
+
+    .single-value__icon {
+      display: flex;
+      justify-content: center;
+      width: 70px;
+      height: 70px;
+      background-color: $--chart-single-value-icon-background-color;
+      border-radius: 50%;
+
+      i {
+        display: flex;
+        align-items: center;
+        font-size: 28px;
+        color: $--color-primary;
+      }
+    }
+
+    .single-value__content {
+      display: flex;
+      flex-direction: column;
+      max-width: 60%;
+      padding-right: 10px;
+      margin-left:25px;
+
+      .content__data {
+        margin-bottom: 7%;
+        font-size: 22px;
+        color: #333333;
+        font-weight: bold;
+      }
+
+      .content__title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px !important;
+        color: #7e8081;
+        margin-bottom: 7%;
+        font-weight:400;
+      }
+
+      .content__percentile {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 12px;
+        color: #666666;
+        display:flex;
+        flex-direction: row;
+        font-weight: bold;
+
+        .circle__content {
+          display:flex;
+          flex-display:row;
+          margin-right:15px;
+
+          .percentile__title-color {
+            color:#9b9b9b;
+            font-weight: 500;
+          }
+        }
+      }
+
+      .circle {
+        position: relative;
+        width: 7px;
+        height: 7px;
+        line-height: 7px;
+        border-radius: 50%;
+        -moz-border-radius: 50%;
+        margin: auto;
+        margin-right: 4px;
+        z-index: 1;
+      }
+
+      .circle.circle-p50 {
+        background: #ffa200;
+
+      }
+      .circle.circle-p90 {
+        background: #23bf9a;
+      }
+
+      &.single-value__content--with-chart {
+        .content__title {
+          border-bottom: 1px solid $--content-right-background-color;
+        }
+      }
+
+      .single-value__unit {
+        font-weight: normal;
+        color: #333333;
+        font-size: 22px;
+        font-weight: bold;
+      }
+    }
+  }
+
 }
--- a/src/views/charts/charts/ChartSingleValue.vue
+++ b/src/views/charts/charts/ChartSingleValue.vue
@@ -4,7 +4,7 @@
    :class="singleValueClass(type)"
    :style="{ backgroundColor: color }"
  >
-    <div class="single-value-icon__box" v-if="!isCommon3SingleValue(type) && !isDetectionsProtocol(type)">
+    <div class="single-value-icon__box" v-if="!isCommon3SingleValue(type) && !isDetectionsProtocol(type) ">
      <div
        class="single-value__icon"
        :style="`background-color: ${
@@ -32,10 +32,75 @@
        }}</span>
      </div>
    </div>
-    <div
-      class="single-value__content single-value__content--with-chart"
-      v-if="isSingleValueWithEcharts(type)"
-    >
+    <div class="single-value__content" v-if="isSingleValueWithPercentileRight(type)">
+      <div class="data__title-in-one">
+        <div class="content__data">
+          <span>{{
+            handleSingleValue[0] || handleSingleValue[0] === 0
+              ? handleSingleValue[0]
+              : '-'
+          }}</span>
+          <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
+        </div>
+        <div class="content__title title-background-color">
+            <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
+                chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
+              }}</span>
+        </div>
+      </div>
+      <div class="content__percentile">
+        <div class="circle__content">
+          <div class="circle circle-p50"></div>
+          <div><span class="percentile__title-color">P50:</span><span>
+            {{(handleSingleValue[2] || handleSingleValue[2] === 0)
+            ?handleSingleValue[2]
+            :'-'}}
+          </span></div>
+        </div>
+        <div class="circle__content">
+          <div class="circle circle-p90"></div>
+          <div><span class="percentile__title-color">P90:</span><span>
+            {{(handleSingleValue[3]|| handleSingleValue[3] === 0)
+            ?handleSingleValue[3]
+            :'-'}}
+          </span></div>
+        </div>
+      </div>
+    </div>
+    <div class="single-value__content" v-if="isSingleValueWithPercentileLeft(type)">
+      <div class="content__title">
+            <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
+                chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
+              }}</span>
+      </div>
+      <div class="content__data">
+        <span>{{
+          handleSingleValue[0] || handleSingleValue[0] === 0
+            ? handleSingleValue[0]
+            : '-'
+        }}</span>
+        <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
+      </div>
+      <div class="content__percentile">
+        <div class="circle__content">
+          <div class="circle circle-p50"></div>
+          <div><span class="percentile__title-color">P50:</span><span>
+            {{(handleSingleValue[2]|| handleSingleValue[2] === 0)
+            ?handleSingleValue[2]
+            :'-'}}
+          </span></div>
+        </div>
+        <div class="circle__content">
+          <div class="circle circle-p90"></div>
+          <div><span class="percentile__title-color">P90:</span><span>
+            {{(handleSingleValue[3]|| handleSingleValue[3] === 0)
+            ?handleSingleValue[3]
+            :'-'}}
+          </span></div>
+        </div>
+      </div>
+    </div>
+    <div class="single-value__content single-value__content--with-chart" v-if="isSingleValueWithEcharts(type)">
      <div class="content__title">
        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
          chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
@@ -129,19 +194,16 @@
              <i :class="chartInfo.params.icon[0]" :style="{color: chartInfo.params.iconColor[0]}"></i>
            </div>
            <div class="content__data-protocol-value">
-              <div class="content__data-protocol-values">
              <div class="content__data-protocol-value-title">{{$t('protocol.requestVolume')}}</div>
              <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'bytes'), chartInfo.params.unitType).join(' ')}}</div>
            </div>
            <div class="content__data-protocol-percent">占比&nbsp;&nbsp;<span>{{unitConvert($_.get(chartData, 'bytesPercent') * 100, unitTypes.percent).join(' ') }}</span><span>%</span></div>
          </div>
-          </div>
          <div class="content__data-protocol">
            <div class="content__data-protocol-icon" :style="{backgroundColor: chartInfo.params.iconBackgroundColor[1]}">
              <i :class="chartInfo.params.icon[1]" :style="{color: chartInfo.params.iconColor[1]}"></i>
            </div>
            <div class="content__data-protocol-value">
-              <div class="content__data-protocol-values">
              <div class="content__data-protocol-value-title">{{$t('protocol.totalFlow')}}</div>
              <div class="content__data-protocol-value-num">{{unitConvert($_.get(chartData, 'count'), chartInfo.params.unitType).join(' ')}}</div>
            </div>
@@ -150,7 +212,6 @@
        </div>
      </div>
  </div>
-  </div>
 </template>

 <script>
@@ -164,6 +225,8 @@ import {
  getChartColor,
  isCommonSingleValue,
  isSingleValueWithEcharts,
+  isSingleValueWithPercentileLeft,
+  isSingleValueWithPercentileRight,
  isCommon2SingleValue,
  isSingleValueWithPercent,
  isCommon3SingleValue,
@@ -201,21 +264,31 @@ export default {
  },
  computed: {
    handleSingleValue () {
-      const value =
-        this.$_.isEmpty(this.chartData) || this.$_.get(this, 'chartData')
+      const value = this.$_.isEmpty(this.chartData) || this.$_.get(this, 'chartData')
        ? this.chartData
        : ''
-      const unitType = this.chartInfo.params.unitType

+      const unitType = this.chartInfo.params.unitType
      const result = unitConvert(value, unitType)

+      let p50 = ''
+      let p90 = ''
+      if (this.type === 506 || this.type === 507) {
+        p50 = this.chartData ? unitConvert(this.chartData[0].p50, unitType) : ''
+        p90 = this.chartData ? unitConvert(this.chartData[0].p90, unitType) : ''
+      }
+
      switch (unitType) {
        case unitTypes.percent: {
          result[0] = result[0] < 0.01 ? '< 0.01' : result[0]
+          result[2] = (p50 && (p50[0] || Number(p50[0]) === 0)) ? p50[0] + '%' : ''
+          result[3] = (p90 && (p90[0] || Number(p90[0]) === 0)) ? p90[0] + '%' : ''
          break
        }
        case unitTypes.time: {
          result[0] = result[0] < 1 ? '< 1' : result[0]
+          result[2] = (p50 && (p50[0] || Number(p50[0]) === 0)) ? p50[0] + p50[1] : ''
+          result[3] = (p90 && (p90[0] || Number(p90[0]) === 0)) ? p90[0] + p90[1] : ''
          break
        }
        default:
@@ -230,6 +303,10 @@ export default {
          c = 'cn-chart__single-value--icon-left'
        } else if (this.isSingleValueWithEcharts(type)) {
          c = 'cn-chart__single-value--chart'
+        } else if (this.isSingleValueWithPercentileLeft(type)) {
+          c = 'cn-chart__single-value--percentile-left'
+        } else if (this.isSingleValueWithPercentileRight(type)) {
+          c = 'cn-chart__single-value--percentile-right'
        } else if (this.isCommon2SingleValue(type)) {
          c = 'cn-chart__single-value--icon-right'
        } else if (this.isCommon3SingleValue(type)) {
@@ -246,6 +323,8 @@ export default {
  methods: {
    isCommonSingleValue,
    isSingleValueWithEcharts,
+    isSingleValueWithPercentileLeft,
+    isSingleValueWithPercentileRight,
    isCommon2SingleValue,
    isCommon3SingleValue,
    isSingleValueWithPercent,
--- a/src/views/charts/charts/tools.js
+++ b/src/views/charts/charts/tools.js
@@ -128,6 +128,14 @@ export function isCommon3SingleValue (type) {
 export function isSingleValueWithPercent (type) {
  return type === 505
 }
+/* 带分位值的单值 */
+export function isSingleValueWithPercentileLeft (type) {
+  return type === 506
+}
+/* 带分位值的单值 */
+export function isSingleValueWithPercentileRight (type) {
+  return type === 507
+}
 /* table */
 export function isTable (type) {
  return type >= 601 && type <= 700
--- a/src/views/entityExplorer/entityList/detailOverview/App.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/App.vue
@@ -222,41 +222,51 @@ export default {
          {
            params: {
              icon: 'cn-icon cn-icon-time',
-              unitType: unitTypes.time
+              unitType: unitTypes.time,
+              iconColor: '#2ca3fe',
+              iconBackgroundColor: '#eff6fe'
            },
-            type: 501,
+            type: 507,
            i18n: 'entities.avgRoundTripTime'
          },
          {
            params: {
              icon: 'cn-icon cn-icon-http',
-              unitType: unitTypes.time
+              unitType: unitTypes.time,
+              iconColor: '#2ca3fe',
+              iconBackgroundColor: '#eff6fe'
            },
-            type: 501,
+            type: 507,
            i18n: 'entities.httpResponseLatency'
          },
          {
            params: {
              icon: 'cn-icon cn-icon-ssl',
-              unitType: unitTypes.time
+              unitType: unitTypes.time,
+              iconColor: '#2ca3fe',
+              iconBackgroundColor: '#eff6fe'
            },
-            type: 501,
+            type: 507,
            i18n: 'entities.sslConLatency'
          },
          {
            params: {
              icon: 'cn-icon cn-icon-package-loss',
-              unitType: unitTypes.percent
+              unitType: unitTypes.percent,
+              iconColor: '#2ca3fe',
+              iconBackgroundColor: '#eff6fe'
            },
-            type: 501,
+            type: 507,
            i18n: 'entities.sequenceGapLossPercent'
          },
          {
            params: {
              icon: 'cn-icon cn-icon-upload',
-              unitType: unitTypes.percent
+              unitType: unitTypes.percent,
+              iconColor: '#2ca3fe',
+              iconBackgroundColor: '#eff6fe'
            },
-            type: 501,
+            type: 507,
            i18n: 'entities.pktRetransPercent'
          }
        ],
--- a/src/views/entityExplorer/entityList/detailOverview/Domain.vue
+++ b/src/views/entityExplorer/entityList/detailOverview/Domain.vue
@@ -227,41 +227,51 @@ export default {
          {
            params: {
              icon: 'cn-icon cn-icon-time',
-              unitType: unitTypes.time
+              unitType: unitTypes.time,
+              iconColor: '#2ca3fe',
+              iconBackgroundColor: '#eff6fe'
            },
-            type: 501,
+            type: 507,
            i18n: 'entities.avgRoundTripTime'
          },
          {
            params: {
              icon: 'cn-icon cn-icon-http',
-              unitType: unitTypes.time
+              unitType: unitTypes.time,
+              iconColor: '#2ca3fe',
+              iconBackgroundColor: '#eff6fe'
            },
-            type: 501,
+            type: 507,
            i18n: 'entities.httpResponseLatency'
          },
          {
            params: {
              icon: 'cn-icon cn-icon-ssl',
-              unitType: unitTypes.time
+              unitType: unitTypes.time,
+              iconColor: '#2ca3fe',
+              iconBackgroundColor: '#eff6fe'
            },
-            type: 501,
+            type: 507,
            i18n: 'entities.sslConLatency'
          },
          {
            params: {
              icon: 'cn-icon cn-icon-package-loss',
-              unitType: unitTypes.percent
+              unitType: unitTypes.percent,
+              iconColor: '#2ca3fe',
+              iconBackgroundColor: '#eff6fe'
            },
-            type: 501,
+            type: 507,
            i18n: 'entities.sequenceGapLossPercent'
          },
          {
            params: {
              icon: 'cn-icon cn-icon-upload',
-              unitType: unitTypes.percent
+              unitType: unitTypes.percent,
+              iconColor: '#2ca3fe',
+              iconBackgroundColor: '#eff6fe'
            },
-            type: 501,
+            type: 507,
            i18n: 'entities.pktRetransPercent'
          }
        ],