nbcio-boot登录后首页的跟踪出现total问题修正

简介: nbcio-boot登录后首页的跟踪出现total问题修正

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

相关文章
|
18天前
ruoyi-nbcio项目增加右上角的消息提醒
ruoyi-nbcio项目增加右上角的消息提醒
17 0
|
18天前
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(三)
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(三)
35 0
|
18天前
|
移动开发 前端开发
基于jeecg-boot的flowable流程历史记录显示修改
基于jeecg-boot的flowable流程历史记录显示修改
18 0
|
18天前
|
Java
nbcio-boot升级到3.1后出现online表单新增报错
nbcio-boot升级到3.1后出现online表单新增报错
25 0
|
18天前
|
移动开发 前端开发 Java
nbcio-boot项目的文件上传与回显处理方法
nbcio-boot项目的文件上传与回显处理方法
15 1
|
18天前
|
SQL 前端开发
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(五)
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(五)
34 0
|
18天前
|
搜索推荐
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(四)
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(四)
32 0
|
18天前
|
前端开发
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(六)
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(六)
33 0
|
18天前
|
SQL 前端开发
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(八)
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(八)
52 0
|
18天前
|
前端开发
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(七)
基于若依ruoyi-nbcio增加flowable流程待办消息的提醒,并提供右上角的红字数字提醒(七)
26 0