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

news2024/11/26 8:43:15

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1029228.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

贝叶斯滤波计算4d毫米波聚类目标动静属性

机器人学中有些问题是二值问题&#xff0c;对于这种二值问题的概率评估问题可以用二值贝叶斯滤波器binary Bayes filter来解决的。比如机器人前方有一个门&#xff0c;机器人想判断这个门是开是关。这个二值状态是固定的&#xff0c;并不会随着测量数据变量的改变而改变。就像门…

使用FFmpeg+ubuntu系统转化flac无损音频为mp3

功能需求如上题,我们来具体的操作一下: 1.先在ubuntu上面安装FFmpeg:sudo apt install ffmpeg 2.进入有flac音频文件的目录使用下述命令: ffmpeg -i test.FLAC -c:a libmp3lame -q:a 2 output.mp3 3.如果没有什么意外的话,你就能看到你的文件夹里面已经有转化好的mp3文件了 批…

【考研数学】高等数学第六模块 —— 空间解析几何(2,向量的应用)

文章目录 引言二、向量的应用2.1 平面2.2 直线2.3 特殊曲面2.3.1 旋转曲面2.3.2 柱面 2.4 距离2.5 夹角 写在最后 引言 承接前文&#xff0c;介绍完向量的基本概念与运算后&#xff0c;我们来看看向量有哪些应用。 二、向量的应用 2.1 平面 &#xff08;一&#xff09;平面的…

【AWS】AI 代码生成器—Amazon CodeWhisperer初体验 | 开启开挂编程之旅

使用 AI 编码配套应用程序更快、更安全地构建应用程序 文章目录 1.1 Amazon CodeWhisperper简介1.2 Amazon CodeWhisperer 定价2.1 打开VS Code2.2 安装AWS ToolKit插件 一、前言 1.1 Amazon CodeWhisperper简介 1️⃣更快地完成更多工作 CodeWhisperer 经过数十亿行代码的训…

游戏创业小知识:游戏运营的步骤和流程

游戏运营是确保游戏在持续运行中保持活跃和成功的过程。以下是游戏运营的一般步骤流程&#xff1a; 1.游戏发布前准备 游戏选择&#xff1a;了解并熟悉游戏的核心概念、目标受众和游戏玩法。 开发团队&#xff1a;组建开发团队&#xff0c;包括程序员、设计师、艺术家和声音设…

志高团队:广阔前景 全新的投资理财体验

当今时代,数字金融迅猛发展,投资理财领域正在经历前所未有的重大变革。作为加拿大华企联合会控股旗下的重要项目,恒贵即将启动,旨在为广大投资者带来全新的投资理财体验。这一创新项目的优势和广阔前景受到了业内观察机构的广泛关注和期待。 恒贵作为一家全新的P2C多元化投资理…

Neo4j图数据库_web页面关闭登录实现免登陆访问_常用的cypher语句_删除_查询_创建关系图谱---Neo4j图数据库工作笔记0013

由于除了安装,那么真实使用的时候,就是导入数据了,有了关系和节点的csv文件以后如果用 cypher进行导入数据和创建关系图谱,还有进行查询,以及如果导入错误如何清空,大概是这些 用的最多的,单独把这些拿进来,总结一下,用的会比较方便. 1.实现免登陆访问: /data/module/neo4j-…

MySQL 高级语句 Part1

高级语句 第一部分 一、MySQL进阶查询语句1.1 select ----显示表格中一个或数个字段的所有数据记录1.2 distinct ----不显示重复的数据记录1.3 where ----有条件查询1.4 and or ----且 或1.5 in----显示已知的值的数据记录1.6 between----显示两个值范围内的数据记录1.7 通配符…

AG35学习笔记(二):安装编译SDK、CMakeLists编译app、Scons编译server

目录 一、概述二、安装SDK2.1 网盘SDK - 权限不够2.2 bj41 - 需要交叉source2.3 mullen - relocate_sdk.py路径有误 三、编译SDK3.1 /bin/sh: 1: gcc: not found3.2 curses.h: No such file or directory 四、CMakeLists - 编译app4.1 cmake - 项目构建4.2 make - 项目编译4.3 …

dpkg工具、ZED相机sdk、监控nvidia

1.dpkg工具的选项学习 dpkg命令是Debian Linux系统用来安装、创建和管理软件包的实用工具。 语法 dpkg(选项) (参数) 选项 -i&#xff1a;安装软件包&#xff1b; -r&#xff1a;删除软件包&#xff1b; -P&#xff1a;删除软件包的同时删除其配置文件&#xff1b; -L&#xf…

广州巨控GRM300/311/312/322/323/331/332协议转换网关

接口资源 * GRM300系列具备1路232口&#xff08;可转485&#xff09;&#xff0c;4路隔离485口 * 485口支持各种PLC&#xff08;PPI,MPI&#xff0c;HOSTLINK&#xff09;&#xff0c;MODBUS仪表 * 3路以太网口支持西门子欧姆龙三菱AB等主流PLC * 网口内置交换机功能&#…

Eclipse ABAP ADT 集成详细安装教程

最近看到网上有个源码使用CDS做的&#xff0c;然后看了一下原来还可以用eclipse&#xff0c;趁热打铁&#xff0c;试了一把&#xff0c;最后成功了&#xff0c;中间可能会有一些报错&#xff0c;可以自己慢慢解决&#xff0c;大概就是这样的。 SAP的开发&#xff0c;有三种开发…

RNN模型与NLP应用(1/9):数据处理基础Data Processing Basics

文章目录 处理分类特征把分类特征转化为数值特征应用one-hot编码indice要从1开始而不能从0开始数据处理为什么使用one-hot向量 处理文本数据Step1&#xff1a;将文本分割成单词Step2&#xff1a;计算单词的频度按频度递减的方式排序 Step3&#xff1a;One-Hot编码 处理分类特征…

计算机网络运维方向综合知识大全

一. 基础知识 1. 网络的组成 组成部分&#xff1a;硬件、软件、协议 硬件主要由主机&#xff08;也称端系统&#xff09;、通信链路&#xff08;如双绞线、光纤&#xff09;、交换设备&#xff08;如路由器、交换机等)和通信处理机&#xff08;如网卡)等组成。软件主要包括各种…

ChatGLM 配置CUDA使用GPU本地训练

Cuda的下载及安装 cuda版本 由于显卡的不同,需要先查看我们显卡及驱动最高支持的cuda。 进入cmd输入nvidia -smi 版本支持向下兼容,为了保证能够和其他开发库版本兼容,这里使用的CUDN版本为11.6. cuda下载 CUDA Toolkit| NVIDIA Developer官网找到对应CUDA版本。(我这里…

低代码平台:构建应用程序的“银弹”

低代码开发平台要让每个人&#xff0c;包括开发者和普通业务人员&#xff0c;都能够成为企业数字化过程中的主导者和构建者&#xff01;让普通人更容易上手&#xff01; 基于这一目标&#xff0c;应用需求多的云服务商成为低代码投资的主要来源。一家云服务商如谷歌云会同时投资…

file.close总是标红的解决方法

goland 2022 1.4、 go版本1.19中使用 os.File 关闭文件时报错 “Unresolved reference ‘Close‘“ - 稻田代码 - 稻田代码库

一文看懂这些海外社媒平台属性,跨境外贸必看

随着社交媒体平台的普遍使用&#xff0c;在平台上营销品牌形象、投放广告已经成为销售转化的强大动力&#xff0c;我们普遍熟络的都是国内平台&#xff0c;那么对于跨境外贸的小伙伴来说&#xff0c;熟悉海外社媒平台更加重要&#xff01; 当然仅仅用一个社交媒体平台获得流量的…

LC1713. 得到子序列的最少操作次数(java - 动态规划)

LC1713. 得到子序列的最少操作次数 题目描述LIS 动态规划 二分法代码演示 题目描述 难度 - 困难 LC1713.得到子序列的最少操作次数 给你一个数组 target &#xff0c;包含若干 互不相同 的整数&#xff0c;以及另一个整数数组 arr &#xff0c;arr 可能 包含重复元素。 每一次…

mysql 备份和还原 mysqldump

因window系统为例 在mysql安装目录中的bin目录下 cmd 备份 备份一个数据库 mysqldump -uroot -h hostname -p 数据库名 > 备份的文件名.sql 备份部分表 mysqldump -uroot -h hostname -p 数据库名 [表 [表2…]] > 备份的文件名.sql ## 多个表 空格隔开&#xff0c;中间…