数据库进度条模板

本贴最后更新于 201 天前,其中的信息可能已经渤澥桑田

image

简略

模板代码

请优先看回帖中的解决方案,这里的代码在一些情况下有问题。

日期范围内进度

  • 开始时间结束时间 列获取时间
  • 修改 rgb(45,164,78) 以修改进度条前景色;
.action{$today := (now | date "20060102150405")}
.action{$nowdate := (toDate "20060102150405" $today)}
.action{$startTime := .开始时间}
.action{$endTime := .结束时间}
.action{$percentage := 0.0}
.action{if eq nil $endTime}
    .action{$percentage = 0.0}
.action{else}
    .action{if eq nil $startTime}
        .action{$startTime = $endTime}
    .action{end}
    .action{$endTime = date "20060102150405" $endTime }
    .action{$endTime = parseTime $endTime}
    .action{$totalDuration := $endTime.Sub $startTime}
    .action{$elapsedDuration := $nowdate.Sub $startTime}
    .action{$percentage = 0.0}
    .action{if eq 0 (div $totalDuration.Hours 24)}
        .action{$percentage = 100.0}
    .action{else}
        .action{$percentage = (mulf (divf (divf $elapsedDuration.Hours 24) (divf $totalDuration.Hours 24)) 100.0)}
    .action{end}
.action{end}
.action{$color := "rgb(45,164,78)" }
<!-- 在下面一行粘贴切换颜色的模板代码 -->


<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{$percentage}%; background-color: .action{$color}; display: inline-block;height: inherit;vertical-align: top;"></span>
</span>

<!-- 一个日期列内使用结束时间 -->
.action{$today := (now | date "20060102150405")}
.action{$nowdate := (toDate "20060102150405" $today)}
.action{$startTime := .计划时间}
.action{$endTime := index . "计划时间_end"}
.action{$percentage := 0.0}
<!-- 判断空值 -->
.action{if eq nil $endTime}
    .action{$percentage = 0.0}
.action{else}
    .action{if eq nil $startTime}
        .action{$startTime = $endTime}
    <!-- 或许能够解决 _end时间div0的问题? -->
    .action{$endTime = date "20060102150405" $endTime }
    .action{$endTime = parseTime $endTime}
    .action{end}
    .action{$totalDuration := $endTime.Sub $startTime}
    .action{$elapsedDuration := $nowdate.Sub $startTime}
    .action{$percentage = 0.0}
    .action{if eq 0 (div $totalDuration.Hours 24)}
        .action{$percentage = 100.0}
    .action{else}
        .action{$percentage = (mulf (divf (divf $elapsedDuration.Hours 24) (divf $totalDuration.Hours 24)) 100.0)}
    .action{end}
.action{end}

.action{$color := "rgb(45,164,78)" }
<!-- 在下面一行粘贴切换颜色的模板代码 -->


<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{$percentage}%; background-color: .action{$color}; display: inline-block;height: inherit;vertical-align: top;"></span>
</span>

随进度改变颜色

  • 颜色更改时机:从左到右逐渐减小,以空格分隔,应为浮点数 list 70.0 50.0 30.0 10.0 0.0

    • 对应颜色 (+, 70.0] 对应颜色 1,(70.0, 50.0] 对应颜色 2……;
  • 更改到的颜色:依次对应上面的更改时机,值满足 css 的颜色要求即可 list "#f94144" "#FF6E34" "#B88B06" "#2DA44E" "#2571BF"

    • 上述示例为 红 橙 黄 绿 蓝,对应已过的时间 >70, > 50, ...
.action{$colorGradient_triggerPercentage := list 70.0 50.0 30.0 10.0 0.0}
.action{$colorGradient_baseColor := list "#f94144" "#FF6E34" "#B88B06" "#2DA44E" "#2571BF"}
.action{range $index, $element := $colorGradient_triggerPercentage}
    .action{if ge $percentage (index $colorGradient_triggerPercentage $index)}
        .action{$color = index $colorGradient_baseColor $index}
        .action{break}
    .action{end}
.action{end}

示例:

.action{$percentage := 60.0}
.action{$color := "rgb(45,164,78)"}

<!-- 上面是需要使用到的变量,下面是具体更改的代码,用作上面进度的变色切换时,不要包含上面 -->
.action{$colorGradient_triggerPercentage := list 70.0 50.0 30.0 10.0 0.0}
.action{$colorGradient_baseColor := list "#f94144" "#FF6E34" "#B88B06" "#2DA44E" "#2571BF"}
.action{range $index, $element := $colorGradient_triggerPercentage}
    .action{if ge $percentage (index $colorGradient_triggerPercentage $index)}
        .action{$color = index $colorGradient_baseColor $index}
        .action{break}
    .action{end}
.action{end}

<!-- 下面是用于修改文字的示例,用作上面进度的变色切换时,不要包含下面 -->
.action{$color}
<span style="color: .action{$color};"> 还有x天 </span>

还有 x 天 示例

v1 版本已经移除,如有需要,请使用编辑历史查看;

v3
.action{$today := (now | date "20060102150405")}
.action{$nowdate := (toDate "20060102150405" $today)}
.action{$startTime := .开始时间}
.action{$endTime := .结束时间}
.action{$percentage := 0.0}
<!-- 判断空值 -->
.action{if eq nil $endTime}
    .action{$percentage = 0.0}
.action{else}
    .action{if eq nil $startTime}
        .action{$startTime = $endTime}
    .action{end}
    .action{$endTime = date "20060102150405" $endTime }
    .action{$endTime = parseTime $endTime}
    .action{$totalDuration := $endTime.Sub $startTime}
    .action{$elapsedDuration := $nowdate.Sub $startTime}
    .action{$percentage = 0.0}
    .action{if eq 0 (div $totalDuration.Hours 24)}
        .action{$percentage = 100.0}
    .action{else}
        .action{$percentage = (mulf (divf (divf $elapsedDuration.Hours 24) (divf $totalDuration.Hours 24)) 100.0)}
    .action{end}
.action{end}

.action{$color := "rgb(45,164,78)"}
<!-- 修改颜色 -->
.action{$colorGradient_triggerPercentage := list 70.0 50.0 30.0 10.0 0.0}
.action{$colorGradient_baseColor := list "#f94144" "#FF6E34" "#B88B06" "#2DA44E" "#2571BF"}
.action{range $index, $element := $colorGradient_triggerPercentage}
    .action{if ge $percentage (index $colorGradient_triggerPercentage $index)}
        .action{$color = index $colorGradient_baseColor $index}
        .action{break}
    .action{end}
.action{end}

<!-- 剩余天数 -->
.action{$daysLeft := 0}
.action{$remainingText := ""}

.action{if ne nil $endTime }
    .action{$daysLeft = divf ($endTime.Sub $nowdate).Hours 24}
  
    .action{if eq 0 $startTime.Minute $startTime.Hour $endTime.Minute $endTime.Hour }
        .action{$daysLeft = ceil (divf ($endTime.Sub $nowdate).Hours 24)}
    .action{end}
  
    .action{if gt $daysLeft 0.0}
        .action{$remainingText = printf "还有%.0f天" $daysLeft}
    .action{else if eq $daysLeft 0.0}
        .action{$remainingText = "当天"}
    .action{else}
        .action{$remainingText = printf "已过%.0f天" (subf 0.0 $daysLeft)}
    .action{end}
.action{end}

<span style="color: .action{$color};">.action{$remainingText}</span>

今年进度

仅供参考,如果只是展示一个,不如使用 任务进度条挂件。

  • 计算所在当年 1.1 至当前 12.31
.action{$now := now}
.action{$nowYear := now.Year}
.action{$nowYearStr := printf "%d-01-01" $nowYear}
.action{$startOfYear := (toDate "2006-01-02" $nowYearStr)}
.action{$endOfYear := (toDate "2006-01-02" (printf "%d-12-31" $nowYear))}
.action{$today := (now | date "20060102150405")}
.action{$nowdate := (toDate "20060102150405" $today)}
.action{$totalDuration := $endOfYear.Sub $startOfYear}
.action{$elapsedDuration := $nowdate.Sub $startOfYear}
.action{$daysSinceStart := div $elapsedDuration.Hours 24}
.action{$totalDaysInYear := div $totalDuration.Hours 24}
.action{$percentage := mulf (divf $daysSinceStart $totalDaysInYear) 100.0 | printf "%.2f"}
.action{$color := "rgb(45,164,78)" }
<!-- 在下面一行粘贴切换颜色的模板代码 -->

<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{$percentage}%; background-color: .action{$color}; display: inline-block;height: inherit;vertical-align: top;"></span>
</span>

当月进度

仅供参考,如果只是展示一个,不如使用 任务进度条挂件。

.action{$now := now}
.action{$nowYear := $now.Year}
.action{$nowMonth := $now.Month}
.action{$nowDay := $now.Day}
.action{$startOfMonth := toDate "2006-01-02" (printf "%d-%02d-01" $nowYear $nowMonth) }

.action{$nextMonth := add (mod $nowMonth 12) 1}
.action{$nextYear :=$nowYear}
.action{if eq $nowMonth 12}
    .action{$nextYear = add $nextYear 1}
.action{end}

.action{$endOfMonth := toDate "2006-01-02" (printf "%d-%02d-01" $nextYear $nextMonth)}
.action{$endOfMonth := $endOfMonth | date_modify "-24h"}
.action{$today := now}
.action{$totalDuration := $endOfMonth.Sub $startOfMonth}
.action{$elapsedDuration := $today.Sub $startOfMonth}
.action{$daysSinceStart := div $elapsedDuration.Hours 24}
.action{$totalDaysInMonth := div $totalDuration.Hours 24}
.action{$percentage := mulf (divf $daysSinceStart $totalDaysInMonth) 100.0 | printf "%.2f"}
.action{$color := "rgb(45,164,78)" }
<!-- 在下面一行粘贴切换颜色的模板代码 -->

<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{$percentage}%; background-color: .action{$color}; display: inline-block;height: inherit;vertical-align: top;"></span>
</span>

简单模板入门

思源的很多功能都在官方帮助文档有说明,右下角 ? 点击“帮助”打开帮助文档,待索引完成,点击右侧链接:模板片段 数据库-模板

我也很想用生成式 AI 完成模板,但似乎还是有点问题。给出下面的参考应该可以让 AI 完成的更好。

主要参考

前导说明&基本规则

  1. 加减乘除数学运算均使用 sprig 函数实现,不要使用 +-*/%

  2. 注意区分整型和浮点型计算,浮点数使用 addf subf mulf divf 等;

    1. if 等做比较时,必须类型相同才可比较,即浮点数 float 不能和整型 int 做比较;
  3. 函数调用时,基本遵从 函数名 操作变量1 操作变量2 操作变量3 ... 的格式,例如:mul 3 4

  4. 基本规则(如果 gpt 能跟着链接找到基本语法,那就不需要下面的规则)

    1. 在做基本判断时,使用如下格式

      .action{if 判断条件}
          .action{/*具体的代码*/}
      .action{else if 判断条件}
          .action{/*具体的代码*/}
      .action{else}
          .action{/*具体的代码*/}
      .action{end}
      

      .action{} 形式仅仅是对 {{}} 的替代,不要使用以下格式:

      .if{}
      .else{}
      .elseif{}
      

  • 思源笔记

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

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

    22004 引用 • 87721 回帖 • 2 关注
2 操作
Undii 在 2024-04-17 18:56:05 更新了该帖
Undii 在 2024-04-17 18:46:06 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Nilkshake 1 评论

    谢谢大佬,但这个是日期范围内的进度条还是根据任务进度显示的啊?

    这个是日期范围的进度
    5kyfkr
  • 其他回帖
  • Afterglow 2 评论

    你好,经过您的代码。完整版的如下:

    
    
    .action{$today := (now | date "20060102150405")}
    .action{$nowdate := (toDate "20060102150405" $today)}
    .action{$startTime := .开始时间}
    .action{$endTime := .结束时间}
    .action{$percentage := 0.0}
    .action{if eq nil $endTime}
        .action{$percentage = 0.0}
    .action{else}
        .action{if eq nil $startTime}
            .action{$startTime = $endTime}
        .action{end}
        .action{$endTime = date "20060102150405" $endTime }
        .action{$endTime = parseTime $endTime}
        .action{$totalDuration := $endTime.Sub $startTime}
        .action{$elapsedDuration := $nowdate.Sub $startTime}
        .action{$percentage = 0.0}
        .action{if eq 0 (div $totalDuration.Hours 24)}
            .action{$percentage = 100.0}
        .action{else}
            .action{$percentage = (mulf (divf (divf $elapsedDuration.Hours 24) (divf $totalDuration.Hours 24)) 100.0)}
        .action{end}
    .action{end}
    .action{$color := "rgb(45,164,78)" }
    
    <!-- 在下面一行粘贴切换颜色的模板代码 -->
    .action{$colorGradient_triggerPercentage := list 70.0 50.0 30.0 10.0 0.0}
    .action{$colorGradient_baseColor := list "#f94144" "#FF6E34" "#B88B06" "#2DA44E" "#2571BF"}
    .action{range $index, $element := $colorGradient_triggerPercentage}
        .action{if ge $percentage (index $colorGradient_triggerPercentage $index)}
            .action{$color = index $colorGradient_baseColor $index}
            .action{break}
        .action{end}
    .action{end}
    .action{$percentage}
    
    <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{$percentage}%; background-color: .action{$color}; display: inline-block;height: inherit;vertical-align: top;"></span>
    </span>
    

    我复制进入仍有点小问题:

    image.png

    是哪里出了差错吗?

    用我下面回帖的两个把,一个日期列就可以,日期列改名叫计划时间或者把代码里的计划时间改成你要的名字
    5kyfkr 1
    只针对这个的话,删掉 .action{$percentage} 就行,当时为了测试进度加了个输出 😂
    Undii
  • 奇了怪了,直接使用您的代码,更改名字,换成单列日期还是有问题

  • Afterglow 2 评论

    谢谢您的代码,但是我这边使用似乎还有有些小问题?

    image.png

    1 回复
    我这边测试在没有设置开始结束的时候不会出现当天,你的版本是 3.0.10 嘛?
    5kyfkr
    @5kyfkr 是的 3.0.10,不过我一开始用的是帖主的代码,换成您的代码,也不会出现当天。就是“进度条”有问题。
    Afterglow
  • 查看全部回帖