数据库模板列进度条来啦!

突发奇想,有一种可以简单实现数据库中进度条的方式!
就是用 🟩 和 ⬜ 按照比例来堆砌。当然,这只能粗略地体现百分比中十位的数字,个位的数字是体现不出来的。

后来经过 D 大和评论区大神的帮助,又有了完善的进度条显示方式(即进度条 3)!

效果如下:

截屏 2024022515.15.32.png

  • 建立两个数字类型的列,分别命名为“总数”和“已完成”

  • 建立 2 个模板列,分别命名为“进度”和“进度条”

  • “进度”列代码

    .action{$a:= index . "已完成" }
    .action{$b:= index . "总数" }
    .action{$c:= mul $a 100}
    .action{$d:= div $c $b}
    .action{$d}%
    
  • “进度条”列代码

    • 第一种是向下取整,即只看十位数

      .action{$a:= index . "已完成" }
      .action{$b:= index . "总数" }
      .action{$c:= mul $a 10}
      .action{$d:= div $c $b}
      .action{if eq $d 0}
      ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
      .action{else if eq $d 1}
      🟩⬜⬜⬜⬜⬜⬜⬜⬜⬜
      .action{else if eq $d 2}
      🟩🟩⬜⬜⬜⬜⬜⬜⬜⬜
      .action{else if eq $d 3}
      🟩🟩🟩⬜⬜⬜⬜⬜⬜⬜
      .action{else if eq $d 4}
      🟩🟩🟩🟩⬜⬜⬜⬜⬜⬜
      .action{else if eq $d 5}
      🟩🟩🟩🟩🟩⬜⬜⬜⬜⬜
      .action{else if eq $d 6}
      🟩🟩🟩🟩🟩🟩⬜⬜⬜⬜
      .action{else if eq $d 7}
      🟩🟩🟩🟩🟩🟩🟩⬜⬜⬜
      .action{else if eq $d 8}
      🟩🟩🟩🟩🟩🟩🟩🟩⬜⬜
      .action{else if eq $d 9}
      🟩🟩🟩🟩🟩🟩🟩🟩🟩⬜
      .action{else if eq $d 10}
      🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩
      .action{end}
      
    • 第二种是四舍五入,就不解释了

      .action{$a:= index . "已完成" }
      .action{$b:= index . "总数" }
      .action{$c:= mul $a 100}
      .action{$d:= div $c $b}
      .action{if lt $d 5}
      ⬜⬜⬜⬜⬜⬜⬜⬜⬜⬜
      .action{else if lt $d 15}
      🟩⬜⬜⬜⬜⬜⬜⬜⬜⬜
      .action{else if lt $d 25}
      🟩🟩⬜⬜⬜⬜⬜⬜⬜⬜
      .action{else if lt $d 35}
      🟩🟩🟩⬜⬜⬜⬜⬜⬜⬜
      .action{else if lt $d 45}
      🟩🟩🟩🟩⬜⬜⬜⬜⬜⬜
      .action{else if lt $d 55}
      🟩🟩🟩🟩🟩⬜⬜⬜⬜⬜
      .action{else if lt $d 65}
      🟩🟩🟩🟩🟩🟩⬜⬜⬜⬜
      .action{else if lt $d 75}
      🟩🟩🟩🟩🟩🟩🟩⬜⬜⬜
      .action{else if lt $d 85}
      🟩🟩🟩🟩🟩🟩🟩🟩⬜⬜
      .action{else if lt $d 95}
      🟩🟩🟩🟩🟩🟩🟩🟩🟩⬜
      .action{else}
      🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩
      .action{end}
      
    • 第三种是评论区大神的方法,可以精确到个位数

      .action{$a:= index . "已完成" }
      .action{$b:= index . "总数" }
      .action{$c:= mul $a 100}
      .action{$d:= div $c $b}
      <span style="background-color: rgba(175,184,193,0.2); width: 100%; display: inline-block;height: 12px;border-radius: 6px;align-self: center;overflow: hidden;">
          <span style="text-align: right; font-size: 12px; width: .action{$d}%; background-color: rgb(45,164,78); display: inline-block;height: inherit;vertical-align: top;"></span>
      </span>
      

世上还是大神多呀!

如果你还有更好的方式,欢迎和我交流 ~

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    19804 引用 • 75797 回帖 • 1 关注
2 操作
Liuzn 在 2024-02-25 22:59:48 更新了该帖
Liuzn 在 2024-02-25 15:23:45 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • 88250 2 2 评论

    非常有趣!

    顺便说一下,模板字段是可以使用 HTML/CSS 代码的。

    1 回复
    出个教程
    lv37
    太秀了,比 Notion formula 2.0 的 style 可玩性更强 👍
    Feline
  • Liuzn

    那就要大神来出手了 😂

    1 回复
  • Undii 4 3 评论

    ❤ 基于你的代码改了一下:

    rgba(175,184,193,0.2) 是背景色; rgb(45,164,78) 是已完成的部分;

    .action{$a:= index . "已完成" }
    .action{$b:= index . "总数" }
    .action{$c:= mul $a 100}
    .action{$d:= div $c $b}
    
    <span style="background-color: rgba(175,184,193,0.2); width: 100%; display: inline-block;height: 10px;border-radius: 5px;align-self: center;overflow: hidden;">
        <span style="text-align: right; font-size: 12px; width: .action{$d}%; background-color: rgb(45,164,78); display: inline-block;height: inherit;vertical-align: top;"></span>
    </span>
    
    
    
    1 操作
    Undii 在 2024-02-25 15:03:06 更新了该回帖
    「已完成」和「总数」是不是放反了?
    JeffreyChen
    大神太强了!
    Liuzn
    @a2930610542 没看出来,能用就行呗
    Undii
  • 太秀了!

  • lunzi 2 评论

    这个功能我研究过了,现在有个很大的缺陷是,比如你现在表里的“已完成”和“总数”是手写,想要让他好用,肯定需要用上关联和汇总字段,自动算出一个完成数。但是模板是不支持这两种字段的

    数据库“模板列”无法读取“汇总列”和“关联列”的值 - 88250 的回帖 - 链滴 (ld246.com)

    88250 1
    @88250 太棒了!
    Liuzn
  • Feline 1 赞同

    支持 html/css,进度条直接用 progress 也成,但是改样式没有手搓进度条来得方便。

    <progress max=.action{.总数} value=.action{.已完成}></progress>
    
  • leoyao 1

    在 v3.0.10 后会报错,更新后如下

    .action{$a:= index . "已完成" 0}
    .action{$b:= index . "总数" 0}
    .action{$c:= mul $a 100}
    .action{$d:= div $c $b}
    <span style="background-color: rgba(175,184,193,0.2); width: 100%; display: inline-block; height: 20px; border-radius: 5px; align-self: center; overflow: hidden; position: relative; font-family: Arial, sans-serif;">
        <span style="text-align: right; font-size: 12px; width: .action{$d}%; background-color: rgb(45,164,78); display: inline-block; height: inherit; vertical-align: top; color: white; padding-right: 5px; line-height: 20px;">.action{$d}%</span>
        <span style="position: absolute; right: 5px; top: 0; bottom: 0; color: black; display: flex; align-items: center;"></span>
    </span>
    
    
    1 回复
    1 操作
    JeffreyChen 在 2024-05-17 16:38:44 更新了该回帖
  • 补充说明:模板使用关联或汇总时,填充值为数组,所以可能需要使用 index .汇总 0 来访问第一个值,或者使用 range 迭代所有值。

    关联:Issue #11029 · siyuan-note/siyuan

请输入回帖内容 ...

推荐标签 标签

  • 周末

    星期六到星期天晚,实行五天工作制后,指每周的最后两天。再过几年可能就是三天了。

    14 引用 • 297 回帖
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    76 引用 • 37 回帖
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 507 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 3 关注
  • RYMCU

    RYMCU 致力于打造一个即严谨又活泼、专业又不失有趣,为数百万人服务的开源嵌入式知识学习交流平台。

    4 引用 • 6 回帖 • 50 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 618 关注
  • ActiveMQ

    ActiveMQ 是 Apache 旗下的一款开源消息总线系统,它完整实现了 JMS 规范,是一个企业级的消息中间件。

    19 引用 • 13 回帖 • 644 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    9 引用 • 32 回帖 • 152 关注
  • sts
    2 引用 • 2 回帖 • 162 关注
  • 一些有用的避坑指南。

    69 引用 • 93 回帖
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 43 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    124 引用 • 580 回帖
  • HTML

    HTML5 是 HTML 下一个的主要修订版本,现在仍处于发展阶段。广义论及 HTML5 时,实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。

    103 引用 • 294 回帖
  • gRpc
    10 引用 • 8 回帖 • 51 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 703 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    229 引用 • 1450 回帖
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖 • 65 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 711 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 247 回帖 • 148 关注
  • 博客

    记录并分享人生的经历。

    272 引用 • 2386 回帖
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 140 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖
  • Sym

    Sym 是一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)系统平台。

    下一代的社区系统,为未来而构建

    524 引用 • 4599 回帖 • 689 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 608 关注
  • 新人

    让我们欢迎这对新人。哦,不好意思说错了,让我们欢迎这位新人!
    新手上路,请谨慎驾驶!

    51 引用 • 226 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 646 关注