CN-343 feat : Dashboard--dns 占比单值图开发

2022-03-08 13:39:26 +08:00
parent e5ccc621f8
commit cf58f94739
2 changed files with 270 additions and 59 deletions
--- a/src/assets/css/components/views/charts/chartSingleValue.scss
+++ b/src/assets/css/components/views/charts/chartSingleValue.scss
@@ -7,35 +7,42 @@
    .single-value__icon {
      width: 38px;
      height: 38px;
+
      i {
        font-size: 15px;
      }
    }
+
    .single-value__content {
      .content__data {
        font-size: 14px;
        color: #333;
+
        .single-value__unit {
          font-size: 14px;
          color: #333;
        }
      }
+
      .content__title {
        font-size: 12px;
      }
    }
  }
+
  &.cn-chart__single-value--icon-left {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
+
    .single-value-icon__box {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 0 0 40%;
    }
+
    .single-value__icon {
      display: flex;
      justify-content: center;
@@ -43,6 +50,7 @@
      height: 72px;
      background-color: $--chart-single-value-icon-background-color;
      border-radius: 50%;
+
      i {
        display: flex;
        align-items: center;
@@ -50,17 +58,20 @@
        color: $--color-primary;
      }
    }
+
    .single-value__content {
      display: flex;
      flex-direction: column;
      max-width: 60%;
      padding-right: 10px;
+
      .content__data {
        padding-bottom: 7%;
        font-size: 24px;
        color: #333333;
        font-weight: bold;
      }
+
      .content__title {
        overflow: hidden;
        white-space: nowrap;
@@ -68,11 +79,13 @@
        font-size: 16px;
        color: #666666;
      }
+
      &.single-value__content--with-chart {
        .content__title {
          border-bottom: 1px solid $--content-right-background-color;
        }
      }
+
      .single-value__unit {
        font-weight: normal;
        padding-left: 10px;
@@ -81,6 +94,7 @@
      }
    }
  }
+
  &.cn-chart__single-value--icon-right {
    display: flex;
    flex-direction: row-reverse;
@@ -88,29 +102,34 @@
    align-items: center;
    height: 100%;
    width: 100%;
+
    .single-value-icon__box {
      flex: 0 0 80px;
    }
+
    .single-value__icon {
      background-color: $--chart-single-value-icon-background-color;
      border-radius: 50%;
      position: relative;
      width: 56px;
      height: 56px;
+
      i {
        position: absolute;
        top: 50%;
        left: 50%;
-        transform: translate(-50%,-50%);
+        transform: translate(-50%, -50%);
        font-size: 24px;
        color: $--color-primary;
      }
    }
+
    .single-value__content {
      display: flex;
      height: 100%;
      flex-direction: column;
      padding: 0 10px;
+
      .content__title {
        display: flex;
        align-items: center;
@@ -118,6 +137,7 @@
        font-size: 16px;
        color: #666666;
      }
+
      .content__data {
        display: flex;
        padding-top: 5%;
@@ -129,6 +149,7 @@
      }
    }
  }
+
  &.cn-chart__single-value--icon-right--color {
    display: flex;
    flex-direction: row-reverse;
@@ -136,6 +157,7 @@
    align-items: center;
    height: 100%;
    width: 100%;
+
    .single-value__content {
      display: flex;
      height: 100%;
@@ -160,20 +182,23 @@
            fill: currentColor;
            overflow: hidden;
          }
+
          i {
            position: absolute;
            top: 50%;
            left: 50%;
-            transform: translate(-50%,-50%);
+            transform: translate(-50%, -50%);
            font-size: 24px;
          }
        }
      }
-      .single-value__data{
+
+      .single-value__data {
        display: flex;
        height: 100%;
        flex-direction: column;
        padding-left: 20px;
+
        .content__title {
          display: flex;
          align-items: end;
@@ -182,6 +207,7 @@
          color: #666666;
          padding-bottom: 5px;
        }
+
        .content__data {
          display: flex;
          padding-top: 5%;
@@ -194,16 +220,19 @@
      }
    }
  }
+
  &.cn-chart__single-value--chart {
    display: flex;
    padding: 13px 20px;
    height: 100%;
    width: 100%;
+
    .single-value__content {
      display: flex;
      height: 100%;
      width: 100%;
      flex-direction: column;
+
      .content__title {
        display: flex;
        align-items: center;
@@ -211,6 +240,7 @@
        font-size: 16px;
        color: #666666;
      }
+
      .content__data {
        display: flex;
        align-items: center;
@@ -219,10 +249,100 @@
        color: #333333;
        font-weight: bold;
      }
+
      .content__chart {
        flex: auto
      }
    }
  }
-}

+  &.cn-chart__single-value--icon-doh {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+    background: #FFFFFF;
+    border: 1px solid #E7EAED;
+    box-shadow: 0 2px 4px 0 rgba(51, 51, 51, 0.02);
+    border-radius: 2px;
+
+    .single-value-icon__box {
+      flex: 0 0 80px;
+    }
+
+    .single-value__icon {
+      background-color: $--chart-single-value-icon-background-color;
+      border-radius: 50%;
+      position: relative;
+      width: 56px;
+      height: 56px;
+
+      i {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 24px;
+        color: $--color-primary;
+      }
+    }
+
+    .single-value__content {
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 0 10px;
+      margin-left: 20px;
+
+      .content__title {
+        display: flex;
+        align-items: center;
+        margin: 16px 0 27px 0;
+        font-family: PingFangSC-Medium;
+        font-size: 16px;
+        color: #333333;
+        line-height: 22px;
+        font-weight: 500;
+      }
+
+      .content__data {
+        display: flex;
+        padding-top: 5%;
+        height: 50%;
+        flex: auto;
+        font-size: 24px;
+        color: #333333;
+        font-weight: bold;
+
+        .content__data__doh {
+          .content__data__doh__count {
+            font-family: Roboto-Medium;
+            font-size: 30px;
+            color: #333333;
+            font-weight: 500;
+          }
+
+          .content__data__doh__percent {
+            margin-top: 10px;
+            font-family: Roboto-Black;
+            font-size: 14px;
+            color: #666666;
+            font-weight: 400;
+
+            span {
+              font-family: Roboto-Medium;
+              font-size: 14px;
+              color: #FC8157;
+              font-weight: 500;
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/views/charts/charts/ChartSingleValue.vue
+++ b/src/views/charts/charts/ChartSingleValue.vue
@@ -1,27 +1,61 @@
 <template>
-  <div class="cn-chart__single-value chart-header-position" :class="singleValueClass(type)" :style="{backgroundColor:color}">
+  <div
+    class="cn-chart__single-value chart-header-position"
+    :class="singleValueClass(type)"
+    :style="{ backgroundColor: color }"
+  >
    <div class="single-value-icon__box" v-if="type !== 54">
-      <div class="single-value__icon" :style="`background-color: ${chartInfo.params.iconBackgroundColor || ''}`"><i :class="icon" :style="`color: ${chartInfo.params.iconColor || ''}`"></i></div>
+      <div
+        class="single-value__icon"
+        :style="`background-color: ${
+          chartInfo.params.iconBackgroundColor || ''
+        }`"
+      >
+        <i
+          :class="icon"
+          :style="`color: ${chartInfo.params.iconColor || ''}`"
+        ></i>
+      </div>
    </div>
    <div class="single-value__content" v-if="type === 51">
      <div class="content__data">
-        <span>{{handleSingleValue[0] || handleSingleValue[0] === 0 ? handleSingleValue[0] : '-'}}</span>
-        <span class="single-value__unit">{{handleSingleValue[1]}}</span>
+        <span>{{
+          handleSingleValue[0] || handleSingleValue[0] === 0
+            ? handleSingleValue[0]
+            : '-'
+        }}</span>
+        <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
      </div>
      <div class="content__title">
-        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
+        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
+          chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
+        }}</span>
      </div>
    </div>
-    <div class="single-value__content single-value__content--with-chart" v-if="type === 52">
+    <div
+      class="single-value__content single-value__content--with-chart"
+      v-if="type === 52"
+    >
      <div class="content__title">
-        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
-        <span v-if="chartInfo.params && chartInfo.params.as" class="ip-detail-as">
-          as&nbsp;<span style="text-transform: capitalize">{{chartInfo.params.as}}</span>
+        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
+          chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
+        }}</span>
+        <span
+          v-if="chartInfo.params && chartInfo.params.as"
+          class="ip-detail-as"
+        >
+          as&nbsp;<span style="text-transform: capitalize">{{
+            chartInfo.params.as
+          }}</span>
        </span>
      </div>
      <div class="content__data">
-        <span>{{handleSingleValue[0] || handleSingleValue[0] === 0 ? handleSingleValue[0] : '-'}}</span>
-        <span class="single-value__unit">{{handleSingleValue[1]}}</span>
+        <span>{{
+          handleSingleValue[0] || handleSingleValue[0] === 0
+            ? handleSingleValue[0]
+            : '-'
+        }}</span>
+        <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
      </div>
      <div class="content__chart">
        <div class="chart-drawing" :id="`chart${chartInfo.id}`"></div>
@@ -29,15 +63,21 @@
    </div>
    <div class="single-value__content" v-if="type === 53">
      <div class="content__title">
-        <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
+        <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>
+        <span>{{
+          handleSingleValue[0] || handleSingleValue[0] === 0
+            ? handleSingleValue[0]
+            : '-'
+        }}</span>
+        <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
      </div>
    </div>
-    <div class="single-value__content" v-if="type === 54"  >
-      <div class="single-value-icon__box"  >
+    <div class="single-value__content" v-if="type === 54">
+      <div class="single-value-icon__box">
        <div class="single-value__icon">
          <!-- 使用图标-->
          <svg class="cn-icon-svg" aria-hidden="true">
@@ -47,59 +87,93 @@
      </div>
      <div class="single-value__data">
        <div class="content__title">
-          <span :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name}}</span>
+          <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>
+          <span>{{
+            handleSingleValue[0] || handleSingleValue[0] === 0
+              ? handleSingleValue[0]
+              : '-'
+          }}</span>
+          <span class="single-value__unit">{{ handleSingleValue[1] }}</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="single-value__content" v-if="type === 55">
+      <div>
+      <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">
+        <div class="content__data__doh">
+          <div class="content__data__doh__count">
+            {{ $_.get(chartData, 'count', '-') }}
+          </div>
+          <div class="content__data__doh__percent">
+            占比<span>{{ $_.get(chartData, 'percent', '-') }}%</span>
+          </div>
        </div>
      </div>

+      </div>
    </div>
  </div>
 </template>

 <script>
 import unitConvert from '@/utils/unit-convert'
-import {
-  unitTypes
-} from '@/utils/constants'
+import { unitTypes } from '@/utils/constants'
 import { get } from '@/utils/http'
 import { replaceUrlPlaceholder } from '@/utils/tools'
 import * as echarts from 'echarts'
 import { getOption, getChartColor } from '@/views/charts/charts/tools'
+import _ from 'lodash'
+
 export default {
  name: 'chartSingleValue',
  props: {
    chartInfo: Object,
    chartData: [Array, Object],
-    queryParams: Object
+    queryParams: Object,
  },
-  data () {
+  data() {
    return {
      icon: '',
      color: '',
      type: 0,
      chartOption: null,
-      timer: null
+      timer: null,
    }
  },
  watch: {
    chartInfo: {
      deep: true,
      immediate: true,
-      handler (n) {
+      handler(n) {
        this.icon = n.params.icon
        this.color = n.params.color
        this.type = n.type
-      }
-    }
+      },
+    },
  },
  computed: {
-    handleSingleValue () {
-      const value = this.$_.isEmpty(this.chartData) || this.$_.get(this, 'chartData') ? this.chartData : ''
+    handleSingleValue() {
+      const value =
+        this.$_.isEmpty(this.chartData) || this.$_.get(this, 'chartData')
+          ? this.chartData
+          : ''
+      console.log(value)
      const unitType = this.chartInfo.params.unitType
+      console.log(unitType)
+
      const result = unitConvert(value, unitType)
+      console.log(result)
+
      switch (unitType) {
        case unitTypes.percent: {
          result[0] = result[0] < 0.01 ? '< 0.01' : result[0]
@@ -109,11 +183,13 @@ export default {
          result[0] = result[0] < 1 ? '< 1' : result[0]
          break
        }
-        default: break
+        default:
+          break
      }
+      console.log(result)
      return result
    },
-    singleValueClass () {
+    singleValueClass() {
      return function (type) {
        let c
        switch (type) {
@@ -121,7 +197,10 @@ export default {
            c = 'cn-chart__single-value--icon-left'
            break
          }
-          case 55:
+          case 55: {
+            c = 'cn-chart__single-value--icon-doh'
+            break
+          }
          case 52: {
            c = 'cn-chart__single-value--chart'
            break
@@ -134,42 +213,54 @@ export default {
            c = 'cn-chart__single-value--icon-right--color'
            break
          }
-          default: break
+          default:
+            break
        }
        return c
      }
-    }
+    },
  },
  methods: {
-    chartSingleValueTotal () {
+    chartSingleValueTotal() {
      const chartParams = this.$_.get(this.chartInfo, 'params') || {}
      if (this.type === 52) {
        const dom = document.getElementById(`chart${this.chartInfo.id}`)
        const myChart = echarts.init(dom)
        this.chartOption = this.$_.cloneDeep(getOption(this.type))
-        get(replaceUrlPlaceholder(chartParams.urlChart, this.queryParams)).then(response => {
-          const seriesTemplate = this.chartOption.series[0]
-          const result = response.data.result
-          this.chartOption.series = result.map((r, i) => {
-            return {
-              ...seriesTemplate,
-              name: r.legend,
-              data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]),
-              lineStyle: {
-                color: getChartColor[i]
+        get(replaceUrlPlaceholder(chartParams.urlChart, this.queryParams)).then(
+          (response) => {
+            const seriesTemplate = this.chartOption.series[0]
+            const result = response.data.result
+            this.chartOption.series = result.map((r, i) => {
+              return {
+                ...seriesTemplate,
+                name: r.legend,
+                data: r.values.map((v) => [
+                  Number(v[0]) * 1000,
+                  Number(v[1]),
+                  chartParams.unitType,
+                ]),
+                lineStyle: {
+                  color: getChartColor[i],
+                },
              }
-            }
-          })
-          myChart.setOption(this.chartOption)
-        })
+            })
+            myChart.setOption(this.chartOption)
+          },
+        )
      }
-    }
+    },
  },
-  mounted () {
-    this.$nextTick(() => this.timer = setTimeout(() => { this.chartSingleValueTotal() }, 200))
+  mounted() {
+    this.$nextTick(
+      () =>
+        (this.timer = setTimeout(() => {
+          this.chartSingleValueTotal()
+        }, 200)),
+    )
  },
-  deactivated () {
+  deactivated() {
    clearTimeout(this.timer)
-  }
+  },
 }
 </script>