gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CN-128 perf: 优化图表加载动画

Browse Source
This commit is contained in:
chenjinsong
2021-09-07 11:38:06 +08:00
parent 49d7fdb1d1
commit 3c47b8d613
9 changed files with 44 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/charts/ChartMap.vue
View File

@@ -9,9 +9,12 @@
<slot name="operations"></slot>
</div>
</div>
<div class="cn-chart__body" v-loading="loading">
<div class="cn-chart__body" v-show="!loading">
<slot></slot>
</div>
<div class="cn-chart__body chart__loading" v-show="loading">
<i class="el-icon-loading"></i>
</div>
<div class="cn-chart__footer">
<slot name="footer"></slot>
</div>

14
src/components/charts/ChartSingleValue.vue
View File

@@ -1,10 +1,13 @@
<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)">
<slot name="chartErrorInfo"></slot>
<div class="single-value-icon__box" >
<div class="single-value__icon"><i :class="icon"></i></div>
</div>
<div class="single-value__content" v-if="type === 51">
<div class="single-value__content chart__loading" style="height: 100%; width: 100%;" v-if="loading">
<i class="el-icon-loading"></i>
</div>
<div class="single-value__content" v-if="type === 51" v-show="!loading">
<div class="content__data">
<slot name="data"></slot>
</div>
@@ -12,7 +15,7 @@
<slot name="title"></slot>
</div>
</div>
<div class="single-value__content" v-if="type === 52">
<div class="single-value__content" v-if="type === 52" v-show="!loading">
<div class="content__title">
<slot name="title"></slot>
</div>
@@ -23,7 +26,7 @@
<slot name="chart"></slot>
</div>
</div>
<div class="single-value__content" v-if="type === 53">
<div class="single-value__content" v-if="type === 53" v-show="!loading">
<div class="content__title"></div>
<div class="content__data"></div>
</div>
@@ -35,7 +38,8 @@ export default {
name: 'ChartSingleValue',
props: {
type: Number,
icon: String
icon: String,
loading: Boolean
},
computed: {
singleValueClass () {

5
src/components/charts/ChartTable.vue
View File

@@ -9,7 +9,10 @@
<slot name="operations"></slot>
</div>
</div>
<div class="cn-chart__body" v-loading="loading" v-no-data="noData">
<div class="cn-chart__body chart__loading" v-show="loading">
<i class="el-icon-loading"></i>
</div>
<div class="cn-chart__body" v-show="!loading" v-no-data="noData">
<el-table
style="width: 100%"
tooltip-effect="light"

5
src/components/charts/EchartsFrame.vue
View File

@@ -9,9 +9,12 @@
<slot name="operations"></slot>
</div>
</div>
<div class="cn-chart__body" :class="{'pie-with-table': isPieWithTable}" v-loading="loading" v-no-data="noData">
<div class="cn-chart__body" :class="{'pie-with-table': isPieWithTable}" v-no-data="noData" v-show="!loading">
<slot></slot>
</div>
<div class="cn-chart__body chart__loading" v-show="loading">
<i class="el-icon-loading"></i>
</div>
<div class="cn-chart__footer" v-if="layout.indexOf(layoutConstant.FOOTER) > -1 && !noData" :class="{'pie-with-table': isPieWithTable}" v-loading="loading">
<slot name="footer"></slot>
</div>