CN-252 Cyptocurrency--单值图开发

src/assets/css/components/components/charts/panel.scss

@@ -804,6 +804,73 @@
     }
   }
 }
+.cn-chart__single-value.cn-chart__single-value--icon-right--color {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-around;
+  align-items: center;
+
+  .single-value__content {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: center;
+
+    .single-value-icon__box {
+        padding-right: 30px;
+        .single-value__icon {
+          border-radius: 50%;
+          position: relative;
+          margin-right: 7.5%;
+          margin-top: 30%;
+
+          .cn-icon-svg {
+            width: 50px;
+            height: 50px;
+            vertical-align: middle;
+            fill: currentColor;
+            overflow: hidden;
+          }
+
+          i {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            font-size: 24px;
+          }
+        }
+    }
+
+    .single-value__data{
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      padding-left: 20px;
+
+      .content__title {
+        display: flex;
+        align-items: end;
+        height: 50%;
+        font-size: 16px;
+        color: #666666;
+        padding-bottom: 5px;
+      }
+      .content__data {
+        display: flex;
+        padding-top: 5%;
+        height: 50%;
+        flex: auto;
+        font-size: 24px;
+        color: #333333;
+        font-weight: bold;
+      }
+    }
+
+  }
+}
 .cn-chart__single-value.cn-chart__single-value--chart {
   display: flex;
   padding: 13px 20px;

src/assets/css/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "cn-icon"; /* Project id 2614877 */
-  src: url('iconfont.woff2?t=1639404354758') format('woff2'),
-       url('iconfont.woff?t=1639404354758') format('woff'),
-       url('iconfont.ttf?t=1639404354758') format('truetype');
+  src: url('iconfont.woff2?t=1640662054649') format('woff2'),
+       url('iconfont.woff?t=1640662054649') format('woff'),
+       url('iconfont.ttf?t=1640662054649') format('truetype');
 }
 
 .cn-icon {
@@ -13,6 +13,23 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+
+.cn-icon-mining-machine:before {
+  content: "\e758";
+}
+
+.cn-icon-percentage:before {
+  content: "\e759";
+}
+
+.cn-icon-mining-pool:before {
+  content: "\e75a";
+}
+
+.cn-icon-mining-traffic:before {
+  content: "\e75b";
+}
+
 .cn-icon-entity-alert:before {
   content: "\e755";
 }

src/components/charts/ChartSingleValue.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="cn-chart cn-chart__single-value chart-header-position" :class="singleValueClass(type)">
+  <div class="cn-chart cn-chart__single-value chart-header-position" :class="singleValueClass(type)" :style="{backgroundColor:color}">
     <slot name="chartErrorInfo"></slot>
-    <div class="single-value-icon__box" >
+    <div class="single-value-icon__box"  v-if="type != 54">
       <div class="single-value__icon"><i :class="icon"></i></div>
     </div>
     <div class="chart__loading" v-show="loading">
@@ -30,16 +30,38 @@
       <div class="content__title"></div>
       <div class="content__data"></div>
     </div>
+    <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">
+            <use :xlink:href="icon"></use>
+          </svg>
+        </div>
+      </div>
+      <div class="single-value__data">
+        <div class="content__title">
+          <slot name="title"></slot>
+        </div>
+        <div class="content__data">
+          <slot name="data"></slot>
+        </div>
+      </div>
+
+    </div>
   </div>
 </template>
 
 <script>
+import '@/assets/css/font/iconfont.js'
+
 export default {
   name: 'ChartSingleValue',
   props: {
     type: Number,
     icon: String,
-    loading: Boolean
+    loading: Boolean,
+    color: String
   },
   computed: {
     singleValueClass () {
@@ -58,6 +80,10 @@ export default {
             c = 'cn-chart__single-value--icon-right'
             break
           }
+          case 54: {
+            c = 'cn-chart__single-value--icon-right--color'
+            break
+          }
           default: break
         }
         return c

src/views/charts/Chart.vue

@@ -209,6 +209,7 @@
     :type="chartInfo.type"
     :style="computePosition"
     :icon="singleValue.icon"
+    :color="singleValue.color"
     :loading="loading"
   >
     <template #chartErrorInfo>
@@ -241,7 +242,7 @@
           :table-data="activeIpTable.tableData"
           :style="computePosition"
           :loading="loading"
-          :no-data="false"
+          :no-data="noData"
   >
     <template #chartErrorInfo>
       <chart-error
@@ -465,7 +466,10 @@
 
       <span class="header__operations header__operation-btn" @click="refresh"><i class="cn-icon cn-icon-refresh"></i></span>
     </div>
-    <div class="cn-chart__body">
+    <div class="chart__loading" v-show="loading">
+      <i class="el-icon-loading"></i>
+    </div>
+    <div class="cn-chart__body"  v-no-data="noData">
       <div class="crypto-eventList__record">
         <div class="record__table">
           <div style="height: 100%; overflow: hidden auto;">
@@ -677,7 +681,8 @@ export default {
       pieTableData: [],
       singleValue: {
         value: '-',
-        icon: ''
+        icon: '',
+        color: ''
       },
       showMapBackButton: false, // 下钻之后控制是否显示返回上一层按钮
       standaloneTimeRange: { // 单个图表刷新时，重新获取时间范围，且不影响到其他图
@@ -768,6 +773,9 @@ export default {
         } else if (this.isSingleValue) {
           if (chartParams) {
             this.singleValue.icon = chartParams.icon
+            if (chartParams.color) {
+              this.singleValue.color = chartParams.color
+            }
             const gotData = new Promise(resolve => {
               let result = ''
               if (chartParams.dataKey) {
@@ -887,7 +895,11 @@ export default {
           const queryParams = { ...this.queryTimeRange, ...this.entity }
           get(replaceUrlPlaceholder(chartParams.url, queryParams)).then(response => {
             if (response.code === 200) {
+              if (response.data.result.length > 0) {
                 this.croptyEventList = response.data.result
+              } else {
+                this.noData = true
+              }
             } else {
               this.isError = true
               this.noData = true
@@ -899,6 +911,8 @@ export default {
           }).catch(e => {
             this.isError = true
             this.errorInfo = e
+          }).finally(() => {
+            setTimeout(() => { this.loading = false }, 250)
           })
         } else if (this.isAppBasicInfo) {
           const queryParams = { app: this.entity.app }