【按照年月去统计信息并分类展示】

2023-11-18

1. 前言

需求是需要将历史订单按照年月分类展示,并展示汇总值。由于后端返回的是数组的数据,并没有将数据做好统计分类,出于对自己的自信以及不想给别人添麻烦的信息,然后自己写了一下处理的方法,然后放上最后的效果图吧

2. 代码实现

// 按照月份统计每个月的乘客记录
const getList = computed(() => {
  // 将数据按照时间倒叙排列
  const dataList = historyList.sort((a:any, b:any) => new Date(b.inTransDate.replace(/-/g, '/')) - new Date(a.inTransDate.replace(/-/g, '/')))
  // 获得每条数据的年月日
  const dateList = dataList.map((item:any) => item.inTransDate)
  .map((ele:any) => ele.split(' ')[0])
  // 获取去重的按年月分类的数组 new Set 可以实现数组去重
  const yearMonthList = [... new Set(dateList.map((item:any)=> item.substring(0, 7)))]
  const result:any = []  // 返回的最终结果数组
  // 根据年月数组去处理接口的返回数据,按照年月去分类
  yearMonthList.forEach(item => {
    const obj:any = {
      date: item,
      children: [],
      total: 0
    }
    dataList.forEach((ele:any) => {
      if(ele.inTransDate.indexOf(item) > -1) {
        obj.total += Number(ele.orderAmount) // 计算该月份的总金额
        obj.children.push(ele)
      }
    })
    // console.log(1111111, obj)
    result.push(obj)
  })
  return result
})

3. 效果图

在这里插入图片描述

就这样实现啦 主要是对数组的熟练操作,其中还有一个兼容ios系统的时间展示处理,千万不要踩坑啊 哈哈哈哈

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【按照年月去统计信息并分类展示】 的相关文章

  • 在 JavaScript 中检测页面是否加载到 WKWebView 中

    如何使用 javascript 可靠地检测到页面已加载到 WKWebView 中 我希望能够检测到这些场景 iOS 和 WKWebView iOS 和 Safari not iOS 关于 UIWebView 有一个类似的问题here htt
  • 循环遍历数组并删除项目,而不中断 for 循环

    我有以下 for 循环 当我使用splice 要删除一个项目 我发现 秒 未定义 我可以检查它是否未定义 但我觉得可能有一种更优雅的方法来做到这一点 我们的愿望是简单地删除一个项目并继续 for i 0 len Auction auctio
  • appendChild 错误:无法在层次结构中的指定点插入节点

    There is an error with the function appendChild Node cannot be inserted at the specified point in the hierarchy JS var a
  • 如何使用 JavaScript 刷新页面?

    如何使用 JavaScript 刷新页面 Use location reload https developer mozilla org en US docs Web API Location reload 例如 每当元素带有以下内容时重新
  • 通过纯 JavaScript 获取 div 的第 n 个子元素

    我有一个名为 myDiv 的 div 元素 我怎样才能得到 myDiv 的第n个孩子DOM https en wikipedia org wiki Document Object Model操纵 Markup function reveal
  • 在 JavaScript 函数中加载图像

    我有获取图像像素颜色的功能 function getImage imgsrc var img img src imgsrc var imageMap new Object img load function var canvas
  • jQuery 可以操作插入的元素吗?

    我是 jQuery 的新手 我认为 jQuery 可以操作由代码添加的元素是合理的 但我发现现在还不能 function addVideo click function publisher append div div
  • React中如何触发同级组件的函数?

    I am new to front end world and could not figure out how to trigger a function from a sibling component Lets say I have
  • 如何调试超时等待异步 Angular 任务?无法在角度页面上找到元素

    编辑 请注意 在 ernst zwingli 的帮助下 我找到了问题的根源 因此 如果您遇到相同的错误 他指出的修复之一可能会帮助您 我的问题是量角器本身的一个已知问题 如果您认为这可能是您 我已经扩展了我的步骤 以在我最初的问题之后查明问
  • 为什么函数声明在不同浏览器中的处理方式不同?

    虽然我在谷歌中找不到对此的引用 但我熟悉这样一个事实 在 javascript 中 全局函数声明在执行任何代码之前都会被解释 换句话说 这工作得很好 f function f 但是 我注意到 chrome 和 firefox 对全局函数声明
  • 冒泡可用于图像加载事件吗?

    我可以用吗 window addEventListner 某种程度上来说 我所有的图像都有一个display none 图像加载后 我想设置display inline 这样我就可以规范下载图像时显示的内容 在这种情况下 我无法预加载图像
  • 如何在具有相同值的下拉菜单上触发 jQuery 更改事件

    即使用户选择相同的值 如何每次都触发 jQuery 更改事件 我需要刷新效果 例如如果用户选择Lawyer它会发出警报hello然后用户再次选择Lawyer从下拉菜单中 它应该发出警报hello 我怎样才能实现它 以下是代码 jQuery
  • D3 向对象添加超链接?

    我正在尝试制作 D3 图 它将代表我网站的菜单 我尝试按照此处的其他指南添加超链接 但它们都不起作用 每个对象都会有一个不同的 URL 指向 主页 关于 联系方式等 如果添加超链接 我可以拖动对象吗 这意味着如果我按住单击 如果我单击该对象
  • 引用自身的 Javascript 对象...有问题吗?

    由于 Javascript 允许通过引用分配复合值 因此如果 Javascript 对象引用自身 它将创建无限的引用集 如控制台中所示 这看起来像是某种无限循环 但 Chrome 似乎没有问题 这样做是否存在任何内存问题或其他风险 就记忆力
  • 使 Bootstrap Popover 在悬停而不是单击时出现/消失

    我正在使用 Bootstrap 构建一个网站Popover http twitter github com bootstrap javascript html popovers我不知道如何使弹出窗口出现在悬停而不是单击时 我想做的就是当有人
  • for循环中需要声明变量吗?

    有什么区别 for var i 0 i lt 5 i for i 0 i lt 5 i 是否有必要包含 var 关键字 我知道 var 关键字会影响变量范围 但我无法理解是否有必要在 for 循环中包含该关键字 在第二个示例中 您的变量是全
  • 在javascript中创建图像的缩略图方块(不丢失纵横比)

    我正在制作一个客户端拖放文件上传脚本作为书签 在上传之前 我使用 File API 将图像读取为 base64 格式并将其显示为缩略图 This is how my thumbnails look like I want them to l
  • 绘制多边形

    我正在使用 Google Maps API V3 根据路径绘制多边形 该路径是随机未排序坐标点 LatLng 的数组 这会产生以下形状 Polylines intersect Problem 由于多边形的形状取决于路径中点的顺序 因此如何对
  • 如何使用 javascript 更改文件扩展名

    有谁知道在 Javascript 中更改文件扩展名的简单方法吗 例如 我有一个带有 first docx 的变量 但我需要将其更改为 first html 这将改变字符串包含文件名 let file first docx file file
  • 如何为 jQuery 插件设置私有变量?

    我想创建一个简单的插件 它使用元素的文本作为默认值 或者您可以在调用插件时设置此值 但是 如果我不设置该值 并为多个元素调用插件 则默认值会成倍增加 function fn reText function options var setti

随机推荐

  • JAVA中的JeeSite框架基本简介

    JAVA的主流框架是很多的 每一个框架都有它的适用项目和条件 所有JAVA程序员都熟悉的肯定是常用的四大框架 而JeeSite这个框架使用的人却不是很多 但是这个框架却有它的独到之处 稳定 高效 调用方便 这里对JeeSite做一个简单的介
  • kill掉僵尸进程的方法(kill -9 <PPID>)

    ps A ostat ppid pid cmd grep e Zz 先用以上bash命令找到僵尸进程 Z右边第一列为PPID 第二列为PID kill 9 PPID 即PID对应的父进程即可 kill 9
  • 从TP、FP、TN、FN到ROC曲线、miss rate、行人检测评估

    从TP FP TN FN到ROC曲线 miss rate 行人检测评估 update 2018年1月31日22 21 56 最初版本是基于行人检测Piotr Dollar大佬的论文和代码胡乱写的 难免有错 严谨的paper请参考 The R
  • “不完全类型”指在C++中有声明但又没有定义的类型。

    用delete删除一个只有声明但无定义的类型的指针 是危险的 这通常导致无法调用析构函数 包括对象本身的析构函数 成员 基类的析构函数 从而泄露资源 示例代码 引用 class C 在另一个cpp文件中定义 C createC 在另一个cp
  • 接口并发性能测试开发之:从测试方案设计、测试策略、指标分析到代码编写,这一篇全搞定。

    并发接口性能设计思路与代码编写 1 引言 2 并发测试定义 3 并发测试分类 4 设计思路整理 5 测试方案设计 6 指标分析 7 代码实战 8 总结 1 引言 这篇是我3月份在公司内部做的技术分享内容 由于我在公司内部分享的内容较多 以及
  • Linux命令汇总

    1 常用的快捷键 tab键 命令或者路径提示及不全 ctrl c 放弃当前输入 终止当前任务或程序 ctrl l 清屏 ctrl insert 复制 鼠标右键 粘贴 alt c 断开连接 ctrl shift R 重新连接 alt 1 2
  • 【计算机视觉】上游任务和下游任务的理解

    文章目录 一 前言概述 二 上游任务 三 下游任务 一 前言概述 计算机视觉中有常见的四大任务 分类 解决 what 定位 解决 where 检测 解决 what 和 where 分割 实例分割 语义分割和场景分割等像素级别的处理 二 上游
  • 使命、愿景、价值观到底有什么区别

    以前的企业都是在发展到一定成熟阶段 才开始考虑这三个问题 但今天人们越来越多的意识到 哪怕在企业发展的初期 对于创业企业来说 确定公司的使命 愿景和核心价值观也是非常重要的 明确的使命 愿景和核心价值观对于企业的好处在于 形成统一共识目标方
  • linux下找不到sqlite3头文件,linux下 使用库文件时遇到相关问题的解决方法...

    今天用到sqlite相关函数接口 要用到 include 头文件 如果之前没有安装过sqlite3 这个库文件肯定是找不到的 网上看到需要安装sqlite3 libsqlite3 dev 顺利的话apt get就能安装 如果像我一样软件源比
  • qt中直接用qcustomplot来画图

    参考博客 https www cnblogs com yingjiehit p 3988701 html 画出的图 改良版的图形 最后的源码见 https download csdn net download littlehero 121
  • 谷歌翻译SDK (Google Translate SDK)的使用

    一 安装Google Cloud SDK http blog csdn net nicolelili1 article details 68947164 二 设置你的项目 1 登陆谷歌账号 没有就注册 https accounts goog
  • 【SpringBoot】ApplicationContext介绍

    1 ApplicationContext是spring继BeanFactory之外的另一个核心接口或容器 允许容器通过应用程序上下文环境创建 获取 管理bean 为应用程序提供配置的中央接口 ApplicationContext继承关系 2
  • PCA+SVM手写数字识别 代码参考

    我可以为您提供一些参考 但是最终具体实现还需要您根据自己的需求进行调整 可以参考下面的代码 from sklearn import datasets from sklearn model selection import train tes
  • Android Intent的FLAG标志详解

    原文地址 Android Intent的FLAG标志详解 前言 在Android开发中 Intent想必大家经常用 Intent本意为目的 意向 意图 在Android中 Intent是系统各组件 或应用程序 之间进行数据传递的数据附载者
  • 小程序开发Q&A

    本文总结小程序开发中常见的错误问题 请开发者利用浏览器的搜索功能来检索关键字 快速定位到相关问题 快捷键Ctrl F打开搜索框 Q1 为什么会出现 脚本错误或者未正确调用Page 的错误提示 A 出现这个错误的原因通常是因为对应页面的js文
  • 真香系列!史上最全的微服务专业术语面试50问,赶快收藏备战金九银十!

    前言 上个月4号通过阿里工作的学长进行内推 7天简历评估 11号接到电话面试 尽管猝不及防回答仓促 但好在前期准备充分 通过 3天后进行现场面试 通知时间为早上10点 当日设了七点闹钟 结果五点五十三分惊醒后再无法入睡 起床 重新翻看之前做
  • 春秋云镜 CVE-2022-32991

    春秋云镜 CVE 2022 32991 Web Based Quiz System SQL注入 靶标介绍 该CMS的welcome php中存在SQL注入攻击 1 启动场景 2 注册任意用户 3 登录成功进入主页 http eci 2zei
  • postgresql 清空数据表 truncate

    在 mysql 中如果需要清空表 只需要 TRUNCATE table name 即可 如果有自增的 id 字段 也会还原回 1 但是 postgresql 与 mysql 稍有不同 postgresql 的自增字段 是通过 序列 sequ
  • Python Turtle绘图基础(三)——Turtle色彩和画笔设置

    今天继续给大家介绍Python相关知识 本文主要内容是Python Turtle绘图基础 三 包括Turtle色彩和Turtle画笔设置 一 Turtle色彩设置 想要用Turtle绘制出更加复杂 更加美丽的图形 就必须学习Turtle的色
  • 【按照年月去统计信息并分类展示】

    1 前言 需求是需要将历史订单按照年月分类展示 并展示汇总值 由于后端返回的是数组的数据 并没有将数据做好统计分类 出于对自己的自信以及不想给别人添麻烦的信息 然后自己写了一下处理的方法 然后放上最后的效果图吧 2 代码实现 按照月份统计每