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

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

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

世上还是大神多呀!

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

  • 思源笔记

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

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

    18678 引用 • 69682 回帖 • 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>
    
请输入回帖内容 ...

推荐标签 标签

  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    129 引用 • 793 回帖 • 1 关注
  • Kubernetes

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

    108 引用 • 54 回帖 • 2 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖
  • 心情

    心是产生任何想法的源泉,心本体会陷入到对自己本体不能理解的状态中,因为心能产生任何想法,不能分出对错,不能分出自己。

    59 引用 • 369 回帖 • 1 关注
  • 以太坊

    以太坊(Ethereum)并不是一个机构,而是一款能够在区块链上实现智能合约、开源的底层系统。以太坊是一个平台和一种编程语言 Solidity,使开发人员能够建立和发布下一代去中心化应用。 以太坊可以用来编程、分散、担保和交易任何事物:投票、域名、金融交易所、众筹、公司管理、合同和知识产权等等。

    34 引用 • 367 回帖 • 2 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖
  • Pipe

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

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

    131 引用 • 1114 回帖 • 152 关注
  • 区块链

    区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。所谓共识机制是区块链系统中实现不同节点之间建立信任、获取权益的数学算法 。

    91 引用 • 751 回帖 • 1 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 404 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 290 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    148 引用 • 257 回帖 • 2 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    14 引用 • 7 回帖 • 3 关注
  • Dubbo

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

    60 引用 • 82 回帖 • 607 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 3 关注
  • 机器学习

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

    76 引用 • 37 回帖
  • ActiveMQ

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

    19 引用 • 13 回帖 • 626 关注
  • NetBeans

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

    78 引用 • 102 回帖 • 642 关注
  • Webswing

    Webswing 是一个能将任何 Swing 应用通过纯 HTML5 运行在浏览器中的 Web 服务器,详细介绍请看 将 Java Swing 应用变成 Web 应用

    1 引用 • 15 回帖 • 636 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    185 引用 • 318 回帖 • 347 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    75 引用 • 258 回帖 • 627 关注
  • 正则表达式

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

    31 引用 • 94 回帖
  • 博客

    记录并分享人生的经历。

    270 引用 • 2386 回帖
  • Redis

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

    284 引用 • 247 回帖 • 176 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 55 关注
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 1 关注