perf: overview第一行数字增加动画效果
This commit is contained in:
chenjinsong
14
nezha-fronted/package-lock.json
generated
14
nezha-fronted/package-lock.json
generated
@@ -2262,6 +2262,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"countup.js": {
|
||||
"version": "1.9.3",
|
||||
"resolved": "https://registry.npmjs.org/countup.js/-/countup.js-1.9.3.tgz",
|
||||
"integrity": "sha1-zj5QzXFgRB5HjwfaMYle3MDxyd0="
|
||||
},
|
||||
"crc-32": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.0.tgz",
|
||||
@@ -12099,6 +12104,15 @@
|
||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz",
|
||||
"integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ=="
|
||||
},
|
||||
"vue-countupjs": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-countupjs/-/vue-countupjs-1.0.0.tgz",
|
||||
"integrity": "sha1-QcV6peSFnPwNgusDV0sL7NucqQs=",
|
||||
"requires": {
|
||||
"countup.js": "^1.8.5",
|
||||
"vue": "^2.3.3"
|
||||
}
|
||||
},
|
||||
"vue-hot-reload-api": {
|
||||
"version": "2.3.4",
|
||||
"resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"node-sass": "^4.13.1",
|
||||
"pl-table": "^2.5.8",
|
||||
"vue": "^2.5.2",
|
||||
"vue-countupjs": "^1.0.0",
|
||||
"vue-i18n": "^8.15.1",
|
||||
"vue-resource": "^1.5.1",
|
||||
"vue-router": "^3.0.1",
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
exportUrl:{type:String,required:true},
|
||||
params:{type:Object},
|
||||
exportFileName:{type:String},
|
||||
|
||||
importUrl: {type:String,required:true},
|
||||
},
|
||||
data:function(){
|
||||
return {
|
||||
@@ -130,7 +130,13 @@
|
||||
|
||||
},
|
||||
rollbackImport:function(){
|
||||
this.$delete('/asset/cancelImport?seq='+this.importResult.seq).then(response=>{
|
||||
let url;
|
||||
if (this.importUrl.indexOf("asset") > -1) {
|
||||
url = "/asset/cancelImport";
|
||||
} else if (this.importUrl.indexOf("endpoint") > -1) {
|
||||
url = "/endpoint/cancelImport";
|
||||
}
|
||||
this.$delete(url + '?seq='+this.importResult.seq).then(response=>{
|
||||
if(response.code == 200 ){
|
||||
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
|
||||
}else{
|
||||
@@ -142,8 +148,8 @@
|
||||
importExcel:function(){
|
||||
if(this.importFile && this.importFile.raw){
|
||||
let form = new FormData();
|
||||
form.append('assetsExcelFile',this.importFile.raw);
|
||||
this.$post('/asset/import',form,{'Content-Type': 'multipart/form-data'}).then(response=>{
|
||||
form.append('excelFile',this.importFile.raw);
|
||||
this.$post(this.importUrl,form,{'Content-Type': 'multipart/form-data'}).then(response=>{
|
||||
if(response.code==200 && response.msg=='success'){
|
||||
this.importResult=response.data;
|
||||
this.$emit('afterImport')
|
||||
|
||||
@@ -97,6 +97,7 @@
|
||||
<export-excel
|
||||
export-file-name="asset"
|
||||
export-url="/asset/export"
|
||||
import-url="/asset/import"
|
||||
:params="searchLabel"
|
||||
@afterImport="getAssetData"
|
||||
>
|
||||
|
||||
@@ -217,7 +217,7 @@
|
||||
.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content {
|
||||
position: relative;
|
||||
}
|
||||
.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content span {
|
||||
.content-row-box:first-of-type .content-col-box:last-of-type .content-col-content>span:last-of-type {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
right: 5%;
|
||||
|
||||
@@ -33,31 +33,44 @@
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.asset.title")}}</div>
|
||||
<div class="content-col-content" v-loading="assetLoading">
|
||||
<div class="content-col-content-num">{{(assetData ? assetData.totalStat.total : "") | numberFormat}}</div>
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(assetData ? assetData.totalStat.total : '') | numberFormat"></vue-countup>
|
||||
<span class="overview-row-unit">{{(assetData ? assetData.totalStat.total : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.project.project")}}</div>
|
||||
<div class="content-col-content" v-loading="projectLoading">
|
||||
<div class="content-col-content-num">{{(projectData ? projectData.projectStat.length : "") | numberFormat}}</div>
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(projectData ? projectData.projectStat.length : '') | numberFormat"></vue-countup>
|
||||
<span class="overview-row-unit">{{(projectData ? projectData.projectStat.length : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.module.module")}}</div>
|
||||
<div class="content-col-content" v-loading="moduleLoading">
|
||||
<div class="content-col-content-num">{{(moduleData ? moduleData.moduleStat.length : "") | numberFormat}}</div>
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(moduleData ? moduleData.moduleStat.length : '') | numberFormat"></vue-countup>
|
||||
<span class="overview-row-unit">{{(moduleData ? moduleData.moduleStat.length : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.endpoint.endpoint")}}</div>
|
||||
<div class="content-col-content" v-loading="endpointLoading">
|
||||
<div class="content-col-content-num">{{(endpointData ? endpointData.total : "") | numberFormat}}</div>
|
||||
<div class="content-col-content-num">
|
||||
<vue-countup :start-value="0" :end-value="(endpointData ? endpointData.total : '') | numberFormat"></vue-countup>
|
||||
<span class="overview-row-unit">{{(endpointData ? endpointData.total : '') | unitFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-col-box">
|
||||
<div class="content-col-title">{{$t("dashboard.overview.alert.alertMessage")}}</div>
|
||||
<div class="content-col-content" v-loading="alertMessageLoading">
|
||||
<div class="content-col-content-num">{{(alertMessageData ? alertMessageData.alertMessageTotal : "") | numberFormat}}</div>
|
||||
<div class="content-col-content-num"><vue-countup :start-value="0" :end-value="(alertMessageData ? alertMessageData.alertMessageTotal : '') | numberFormat"></vue-countup></div>
|
||||
<span class="overview-row-unit">{{(alertMessageData ? alertMessageData.alertMessageTotal : '') | unitFormat}}</span>
|
||||
<span>{{$t("dashboard.overview.alert.ruleNum")}} : {{(alertRuleData ? alertRuleData.alertRuleTotal : "") | numberFormat}}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -188,12 +201,15 @@
|
||||
import axios from 'axios';
|
||||
import bus from '../../../../libs/bus';
|
||||
import timePicker from '../../../common/timePicker'
|
||||
import VueCountUp from 'vue-countupjs'
|
||||
|
||||
var timeout; //第三行第三个图的dropdown下拉菜单timeout
|
||||
export default {
|
||||
name: "overview2",
|
||||
components:{
|
||||
'chart-box': chart,
|
||||
'time-picker': timePicker
|
||||
'time-picker': timePicker,
|
||||
'vue-countup': VueCountUp
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -265,6 +281,23 @@
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
},
|
||||
unitFormat(num) {
|
||||
if (num) {
|
||||
try {
|
||||
num = parseFloat(num);
|
||||
if (num < 1000) {
|
||||
return "";
|
||||
} else if (num < 1000000) {
|
||||
return " K";
|
||||
} else if (num < 1000000000) {
|
||||
return " M";
|
||||
}
|
||||
} catch (err) {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
return "";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@@ -85,6 +85,7 @@
|
||||
<export-excel
|
||||
export-file-name="endpoint"
|
||||
export-url="/endpoint/export"
|
||||
import-url="/endpoint/import"
|
||||
:params="endpointSearchLabel"
|
||||
@afterImport="getEndpointTableData"
|
||||
class="margin-l-20"
|
||||
|
||||
Reference in New Issue
Block a user