检索主键下待办事项

检索主键下待办事项

根据主键下页面待办事项数量，在数据库中一个显示效果（根据最新思源笔记使用，其他版本应该不行，最新版更改了 SQL 语法）

三种显示效果：

1. 完成（代表该页面待办事项勾选框已全部勾选）
2. 跟进（代表还未开始勾选）
3. 进度条加比值（代表勾选一部分）

.action{ if index . "custom-avs" }
.action{ $id := .id }
.action{ $remaining := len (queryBlocks "with RECURSIVE finish_tree AS ( SELECT id, parent_id FROM blocks WHERE root_id = '?' and (markdown like '- [x]%' OR markdown like '* [x]%') and type = 'i' and subtype = 't' UNION ALL SELECT fi.id,  fi.parent_id FROM blocks as fi INNER JOIN finish_tree as ft ON fi.parent_id = ft.id ) ,un_finish_parent AS ( SELECT id, parent_id FROM blocks WHERE root_id = '?' and type = 'l' and id in ( select parent_id from blocks where root_id = '?' and (markdown like '- [ ]%' OR markdown like '* [ ]%') and type = 'i' and subtype = 't' ) ) select * from blocks where id not in (select parent_id from un_finish_parent ) and id not in (select id from finish_tree) and root_id = '?' and type = 'i' and subtype = 't'" $id $id $id $id ) }
.action{ $total := len (queryBlocks "SELECT * FROM blocks WHERE root_id = '?' AND type = 'i' AND subtype = 't' AND id not in (SELECT parent_id FROM blocks WHERE type = 'l')" $id) }
.action{ $done := sub $total $remaining }
.action{ if eq $done 0 }
<div style="display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%;">
    <span style="font-size: 1em; color: #f44336; font-weight: bold;">跟进</span>
</div>
.action{ else }
.action{ if eq $remaining 0 }
<div style="display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%;">
    <span style="font-size: 1em; color: #2e7d32; font-weight: bold;">完成</span>
</div>
.action{ else }
.action{ $input := ternary 0 (div (mul 100 $done) $total) (eq $total 0) }
.action{ $denominator := 100 }
.action{ $show_number := true }
.action{ $display_mode := ternary "none" "flex" (eq $input nil) }
.action{ $progress := ternary 0 (div (mul 100 ($input | int)) $denominator) (eq $input nil) }
.action{ $progress = ternary 100 $progress (gt $progress 100) }
.action{ $pi := 3.14159265358979323846264338327950288 }
.action{ $circumference := mulf 2 $pi 9 }
.action{ $mainOffset := subf $circumference (mulf (divf $progress 100) $circumference) }
.action{ $extraPadding := mulf $circumference 0.04 }
.action{ $bgOffsetLeft  := subf $mainOffset $extraPadding }
.action{ $bgOffsetRight := subf $mainOffset (divf $extraPadding 2) }
<div style="display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%;">
    <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 4px; line-height: 1.5;">
        <div role="progressbar" aria-valuenow=".action{ $progress }" style="height: 21px; width: 21px; pointer-events: auto;">
            <svg viewBox="0 0 21 21" color="transparent" style="width: 100%; height: 100%; transform: rotate(-90deg); transform-origin: 50% 50%;">
                <!-- 背景圆 -->
                <circle r="9" cx="10.5" cy="10.5" stroke-width="3" 
                    stroke="rgba(231, 243, 248, 1)" stroke-linecap="round" fill="transparent">
                </circle>
                <!-- 进度条底色 -->
                <circle r="9" cx="10.5" cy="10.5" stroke-width="3" 
                    stroke="rgba(199, 198, 196, 0.5)" stroke-linecap="round" stroke-dasharray=".action{ $circumference } .action{ $bgOffsetLeft }" stroke-dashoffset=".action{ $bgOffsetRight }" fill="transparent">
                </circle>
                <!-- 当前进度 -->
                <circle r="9" cx="10.5" cy="10.5" stroke-width="3" 
                    stroke="rgba(91, 151, 189, 1)" stroke-linecap="round" stroke-dasharray=".action{ $circumference }" stroke-dashoffset=".action{ $mainOffset }" fill="transparent">
                </circle>
            </svg>
        </div>
        <span style="font-size: 0.9em; color: rgba(120, 119, 116, 1); font-weight: bold;">
            .action{ $done }/.action{ $total }
        </span>
    </div>
</div>
.action{ end }
.action{ end }
.action{ end }

模板显示效果

显示效果：