数据库进度条模板

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{}
      

  • 思源笔记

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

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

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

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 感谢分享 ~ 有趣的用法、有用的参考。

  • 日期本身就有结束时间的属性,模板能拿到吗?😳

    1 回复
  • Undii 1

    @88250 麻烦看一下

    帮助文档没写,我也没试出来 😂

    1 回复
  • 88250 1 评论

    下个版本支持 日期字段名_end 变量:

    .action{if .日期}.action{.日期 | date "2006-01-02"}.action{end} .action{if .日期_end} .action{.日期_end | date "2006-01-02"}.action{end}
    

    @hqweay

    好耶!!
    hqweay
  • 大佬 nb

  • 厉害厉害!

  • 5kyfkr 2

    07404d1f975740e6e3c7aaab997528c.png

    3.0.10 后支持上图样式,日期列改名为计划时间,下方是进度条代码

    <!-- 解析当前时间 -->
    .action{$nowdate := now }
    
    <!-- 解析计划开始时间 -->
    .action{$startTime := .计划时间}
    <!-- 如果计划开始时间无效,则将其设置为当前时间 -->
    .action{with $startTime}
        .action{if eq (printf "%v" .) (printf "%v" $nowdate)}
            .action{$startTime = $nowdate}
        .action{end}
    .action{end}
    
    <!-- 解析计划结束时间 -->
    .action{$endTime := .计划时间_end}
    <!-- 如果计划结束时间无效,则将其设置为当前时间 -->
    .action{with $endTime}
        .action{if eq (printf "%v" .) (printf "%v" $nowdate)}
            .action{$endTime = $nowdate}
        .action{end}
    .action{end}
    
    <!-- 检查日期是否解析成功 -->
    .action{with $startTime}
        .action{with $endTime}
            <!-- 计算总持续时间和已过时间 -->
            <!-- 计算总持续时间 -->
            .action{$totalDuration := $endTime.Sub $startTime}
            <!-- 如果计算失败,则设置$totalDuration为0 -->
            .action{with $totalDuration}
                .action{if eq (printf "%v" .) "failed"}
                    .action{$totalDuration = 0}
                .action{end}
            .action{end}
    
            <!-- 计算已过时间 -->
            .action{$elapsedDuration := $nowdate.Sub $startTime}
            <!-- 如果计算失败,则设置$elapsedDuration为0 -->
            .action{with $elapsedDuration}
                .action{if eq (printf "%v" .) "failed"}
                    .action{$elapsedDuration = 0}
                .action{end}
            .action{end}
    
            <!-- 计算百分比 -->
            .action{$percentage := 0}
            <!-- 如果总持续时间大于0且计算成功,计算百分比 -->
            .action{with $totalDuration}
                .action{if and (gt (printf "%v" .) "0") (not (eq (printf "%v" $totalDuration) "failed"))}
                    .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 90.0 70.0 50.0 20.0 0.0}
            .action{$colorGradient_baseColor := list "#f94144" "#FF6E34" "#f2c40d" "#2DA44E" "#2571BF"}
            .action{range $index, $element := $colorGradient_triggerPercentage}
                <!-- 根据百分比确定颜色 -->
                .action{if ge (printf "%.2f" $percentage) (printf "%.2f" (index $colorGradient_triggerPercentage $index))}
                    .action{$color = index $colorGradient_baseColor $index}
                    .action{break}
                <!-- 结束条件 -->
                .action{end}
            <!-- 结束循环 -->
            .action{end}
    
            <!-- 显示进度条 -->
            <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{end}
    .action{end}
    
    2 回复
    1 操作
    5kyfkr 在 2024-04-17 16:35:55 更新了该回帖
  • Undii

    已知问题:

    1. 时间存在空值,或总时长少于 1 天,上述模板计算时存在错误,大量记录行错误可能导致这个数据库加载缓慢,以及大量日志报错;
    2. .action{$percentage := (mulf (divf (div $elapsedDuration.Hours 24) (div $totalDuration.Hours 24)) 100.0)} 可能在使用“结束日期”(_end)时报错,暂时不知道原因;

    如果可以,请尝试下面的修改,应该能够解决问题,还有报错信息的话,麻烦回复本帖。

    .action{$today := (now | date "20060102150405")}
    .action{$nowdate := (toDate "20060102150405" $today)}
    .action{$startTime := .开始时间}
    .action{$endTime := .结束时间}
    .action{$totalDuration := $endTime.Sub $startTime}
    .action{$elapsedDuration := $nowdate.Sub $startTime}
    .action{$percentage := (mulf (divf (div $elapsedDuration.Hours 24) (div $totalDuration.Hours 24)) 100.0)}
    

    替换为:

    .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}
    
    1 回复
    1 操作
    Undii 在 2024-04-17 15:43:22 更新了该回帖
  • 5kyfkr 1

    接上方我的回帖的,还有 x 天的代码,和进度条代码均已修复报错,直接用就行

    .action{$startTime := .计划时间}
    .action{$endTime := .计划时间_end}
    
    .action{$totalDuration := 0}
    .action{$elapsedDuration := 0}
    .action{$percentage := 0.0}
    .action{$color := "rgb(45,164,78)"}
    .action{$remainingText := ""}
    
    .action{if and (not (eq $startTime nil)) (not (eq $endTime nil))}
        .action{$nowdate := now}
    
        .action{$endTimeParsed := $endTime}
        .action{$startTimeParsed := $startTime}
    
        .action{if and (ne $startTimeParsed nil) (ne $endTimeParsed nil)}
            .action{$totalDuration = $endTimeParsed.Sub $startTimeParsed}
            .action{$elapsedDuration = $nowdate.Sub $startTimeParsed}
    
            .action{$totalDurationHours := divf $totalDuration.Hours 1}
            .action{if gt $totalDurationHours 0.0}
                .action{$percentage = (mulf (divf (div $elapsedDuration.Hours 1) $totalDurationHours) 100.0)}
    
                .action{$daysLeft := divf ($endTimeParsed.Sub $nowdate).Hours 24}
                .action{if eq 0 $startTimeParsed.Minute $startTimeParsed.Hour $endTimeParsed.Minute $endTimeParsed.Hour }
                    .action{$daysLeft = ceil (divf ($endTimeParsed.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}
        .action{end}
    .action{end}
    
    .action{$colorGradient_triggerPercentage := list 90.0 70.0 50.0 20.0 0.0}
    .action{$colorGradient_baseColor := list "#f94144" "#FF6E34" "#ffcc00" "#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}
    
    <span style="color: .action{$color};">.action{$remainingText}</span>
    
  • 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
  • 奇了怪了,直接使用您的代码,更改名字,换成单列日期还是有问题

  • 5kyfkr 1

    image.png

    我这边没问题

    1 回复
  • Afterglow 1 评论

    谢谢您的耐心答复,不知道为什么这一次显示正常了,非常感谢!

    那就好,不客气
    5kyfkr
请输入回帖内容 ...