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、效果图