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

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

后来经过 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>
      

世上还是大神多呀!

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

  • 思源笔记

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

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

    20242 引用 • 78290 回帖
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

请输入回帖内容 ...

推荐标签 标签

  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 520 关注
  • 知乎

    知乎是网络问答社区,连接各行各业的用户。用户分享着彼此的知识、经验和见解,为中文互联网源源不断地提供多种多样的信息。

    10 引用 • 66 回帖
  • Quicker

    Quicker 您的指尖工具箱!操作更少,收获更多!

    26 引用 • 85 回帖
  • Swift

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

    34 引用 • 37 回帖 • 510 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    122 引用 • 73 回帖 • 1 关注
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    89 引用 • 345 回帖
  • Swagger

    Swagger 是一款非常流行的 API 开发工具,它遵循 OpenAPI Specification(这是一种通用的、和编程语言无关的 API 描述规范)。Swagger 贯穿整个 API 生命周期,如 API 的设计、编写文档、测试和部署。

    26 引用 • 35 回帖 • 2 关注
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    109 引用 • 54 回帖 • 3 关注
  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    62 引用 • 289 回帖
  • H2

    H2 是一个开源的嵌入式数据库引擎,采用 Java 语言编写,不受平台的限制,同时 H2 提供了一个十分方便的 web 控制台用于操作和管理数据库内容。H2 还提供兼容模式,可以兼容一些主流的数据库,因此采用 H2 作为开发期的数据库非常方便。

    11 引用 • 54 回帖 • 645 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    51 引用 • 37 回帖 • 3 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖
  • Vim

    Vim 是类 UNIX 系统文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff)、语法高亮、全面的帮助系统、本地脚本(Vimscript)和便于选择的可视化模式。

    28 引用 • 66 回帖 • 8 关注
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 6 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 2 关注
  • 面试

    面试造航母,上班拧螺丝。多面试,少加班。

    324 引用 • 1395 回帖 • 1 关注
  • 锤子科技

    锤子科技(Smartisan)成立于 2012 年 5 月,是一家制造移动互联网终端设备的公司,公司的使命是用完美主义的工匠精神,打造用户体验一流的数码消费类产品(智能手机为主),改善人们的生活质量。

    4 引用 • 31 回帖 • 10 关注
  • 安装

    你若安好,便是晴天。

    131 引用 • 1184 回帖
  • JSON

    JSON (JavaScript Object Notation)是一种轻量级的数据交换格式。易于人类阅读和编写。同时也易于机器解析和生成。

    51 引用 • 190 回帖 • 1 关注
  • 安全

    安全永远都不是一个小问题。

    191 引用 • 813 回帖
  • Flume

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

    9 引用 • 6 回帖 • 615 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 19 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖 • 3 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 322 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 605 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1426 引用 • 10046 回帖 • 473 关注
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 50 关注