nbcio-boot登录后出现的首页,页面跟踪的时候,出现堆total的出错,虽然不影响系统使用,但影响美观度,所以还是修正一下吧。
1、主要问题是下面的代码有问题
因为页面创建的时候,total数据获取不到,所以报错。
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="任务总数" :total="tasktotal.dataSource[0].total">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<!--<div>
<trend flag="up" style="margin-right: 16px;">
<span slot="term">月同比</span>
12%
</trend>
<trend flag="down">
<span slot="term">日同比</span>
11%
</trend>
</div>-->
<template slot="footer">任务总数<span></span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="流程总数" :total="flowtotal.dataSource[0].total">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-area />
</div>
<template slot="footer">流程总数<span> {{ }}</span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{
2、主要修改如下:
采用一个变量
a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="任务总数" :total="tasksum">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<template slot="footer">任务总数<span></span></template>
</chart-card>
</a-col>
<a-col :sm="24" :md="12" :xl="6" :style="{ marginBottom: '24px' }">
<chart-card :loading="loading" title="流程总数" :total="flowsum">
<a-tooltip title="指标说明" slot="action">
<a-icon type="info-circle-o" />
</a-tooltip>
<div>
<mini-area />
</div>
<template slot="footer">流程总数<span> {{ }}</span></template>
</chart-card>
</a-col>
computed: { //为了消除页面报错
tasksum() {
if(this.tasktotal.dataSource.length>0){
return String(this.tasktotal.dataSource[0].total);
}
},
flowsum() {
if(this.flowtotal.dataSource.length>0){
return String(this.flowtotal.dataSource[0].total);
}
},
},
created() {
setTimeout(() => {
this.loading = !this.loading
}, 100)
console.log("created tasktotal=",this.tasktotal);
this.loadData(this.tasktotal);
this.loadData(this.flowtotal);
this.loadData(this.taskmonth);
this.loadData(this.flowmonth);
this.initLogInfo();
},
3、效果图