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

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;
+            }
+          }
+        }
+      }
+    }
+  }
+}

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>{{
-        <span class="single-value__unit">{{handleSingleValue[1]}}</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 :title="chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name">{{
-        <span v-if="chartInfo.params && chartInfo.params.as" class="ip-detail-as">
+          chartInfo.i18n ? $t(chartInfo.i18n) : chartInfo.name
-          as&nbsp;<span style="text-transform: capitalize">{{chartInfo.params.as}}</span>
+        }}</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>{{
-        <span class="single-value__unit">{{handleSingleValue[1]}}</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>{{
-        <span class="single-value__unit">{{handleSingleValue[1]}}</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__content" v-if="type === 54">
-      <div class="single-value-icon__box"  >
+      <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>{{
-          <span class="single-value__unit">{{handleSingleValue[1]}}</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 {
+import { unitTypes } from '@/utils/constants'
-  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 () {
+    handleSingleValue() {
-      const value = this.$_.isEmpty(this.chartData) || this.$_.get(this, 'chartData') ? this.chartData : ''
+      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 => {
+        get(replaceUrlPlaceholder(chartParams.urlChart, this.queryParams)).then(
-          const seriesTemplate = this.chartOption.series[0]
+          (response) => {
-          const result = response.data.result
+            const seriesTemplate = this.chartOption.series[0]
-          this.chartOption.series = result.map((r, i) => {
+            const result = response.data.result
-            return {
+            this.chartOption.series = result.map((r, i) => {
-              ...seriesTemplate,
+              return {
-              name: r.legend,
+                ...seriesTemplate,
-              data: r.values.map(v => [Number(v[0]) * 1000, Number(v[1]), chartParams.unitType]),
+                name: r.legend,
-              lineStyle: {
+                data: r.values.map((v) => [
-                color: getChartColor[i]
+                  Number(v[0]) * 1000,
+                  Number(v[1]),
+                  chartParams.unitType,
+                ]),
+                lineStyle: {
+                  color: getChartColor[i],
+                },
               }
-            }
+            })
-          })
+            myChart.setOption(this.chartOption)
-          myChart.setOption(this.chartOption)
+          },
-        })
+        )
       }
-    }
+    },
   },
-  mounted () {
+  mounted() {
-    this.$nextTick(() => this.timer = setTimeout(() => { this.chartSingleValueTotal() }, 200))
+    this.$nextTick(
+      () =>
+        (this.timer = setTimeout(() => {
+          this.chartSingleValueTotal()
+        }, 200)),
+    )
   },
-  deactivated () {
+  deactivated() {
     clearTimeout(this.timer)
-  }
+  },
 }
 </script>