subtrack/internal/web/templates/pages/screen.html

{{define "content"}}
<div class="scr" data-pkg="{{.D.PkgID}}" data-heat="{{.D.HeatMode}}" data-api="/api/screen/day">
  <header class="scr-head navbar bg-body-tertiary border-bottom px-3 py-2">
    <div class="scr-brand navbar-brand mb-0"><span class="mark">代</span>代打台<em>控制台</em></div>

    {{if .D.HasTabs}}
    <nav class="scr-tabs">
      {{range .D.Tabs}}
      <a class="{{if .Active}}on{{end}}" style="--tab:{{.Color}}" href="{{.Href}}">{{.Name}}</a>
      {{end}}
    </nav>
    {{end}}

    <div class="scr-tools">
      <a class="scr-switch" href="/screen?{{.D.FilterQuery}}&heat={{if eq .D.HeatMode "due"}}task{{else}}due{{end}}"
         title="切换热力统计口径">
        {{if eq .D.HeatMode "due"}}热力：到期{{else}}热力：待完成{{end}} ⇄
      </a>
      <button class="scr-theme" type="button" data-theme-toggle aria-label="切换亮色/暗色">
        <span class="ic-moon">☾</span><span class="ic-sun">☀</span>
      </button>
    </div>

    <div class="scr-clock"><b data-clock>--:--:--</b><span data-date></span></div>
    <div class="scr-links">每 {{.D.Refresh}} 秒刷新 · <a href="/calendar">进入工作台</a></div>
  </header>

  <section class="scr-kpis">
    <div class="kpi card bg-body-tertiary border-secondary-subtle">
      <span>客户</span><b>{{.D.Stats.Customers}}</b><i>位</i>
    </div>
    <div class="kpi">
      <span>活跃订阅</span><b>{{.D.Stats.ActiveSubs}}</b><i>条</i>
    </div>
    <div class="kpi kpi-hot card bg-body-tertiary border-secondary-subtle">
      <span>今日到期</span><b>{{.D.Stats.DueToday}}</b><i>条</i>
    </div>
    <div class="kpi kpi-warm card bg-body-tertiary border-secondary-subtle">
      <span>7 天内到期</span><b>{{.D.Stats.Due7}}</b><i>条</i>
    </div>
  </section>

  <section class="scr-main">
    <div class="panel panel-cal card bg-body-tertiary border-secondary-subtle">
      <div class="panel-head card-header bg-transparent border-secondary-subtle py-2">
        <h2>{{if eq .D.HeatMode "due"}}到期热力{{else}}每日待完成{{end}}</h2>
        <span>{{.D.MonthTitle}} · 本月合计 {{.D.HeatTotal}} 单</span>
      </div>
      <div class="heat-grid">
        <div class="heat-dow">{{range .D.Weekdays}}<span>{{.}}</span>{{end}}</div>
        {{range .D.Weeks}}
        <div class="heat-row">
          {{range .}}
          <div class="heat-cell h{{.Heat}}{{if not .InMonth}} out{{end}}{{if .IsToday}} today{{end}}{{if .IsPast}} past{{end}}"
               data-date="{{.Date}}" title="{{.Date}}">
            {{if .Strip}}<span class="asg-strip sm" aria-hidden="true">{{range .Strip}}<i style="background:{{.}}"></i>{{end}}</span>{{end}}
            <span>{{.Day}}</span>
            {{if gt .Urgent 0}}<u class="cell-urgent"></u>{{end}}
            {{if .Count}}<b>{{.Done}}/{{.Count}}</b>{{end}}
          </div>
          {{end}}
        </div>
        {{end}}
      </div>
      <div class="heat-legend">
        <span>{{if eq .D.HeatMode "due"}}到期数{{else}}待完成单量{{end}}</span>
        <i class="h0"></i><i class="h1"></i><i class="h2"></i><i class="h3"></i><i class="h4"></i>
        <em class="legend-hint">悬停格子看当日明细</em>
      </div>
    </div>

    <div class="panel panel-top card bg-body-tertiary border-secondary-subtle">
      <div class="panel-head"><h2>即将到期 TOP 10</h2><span>按剩余量排序</span></div>
      {{if .D.Top}}
      <ol class="top-list list-group list-group-flush">
        {{range $i, $s := .D.Top}}
        <li class="top-item lv-{{$s.Eval.Level}}">
          <span class="rank">{{add $i 1}}</span>
          <span class="top-tail">{{$s.CustomerTail}}</span>
          <span class="top-name">{{$s.CustomerName}}</span>
          <span class="top-pkg" style="--tag:{{$s.PackageColor}}">{{$s.PackageName}}</span>
          <span class="top-remain">{{$s.RemainShort}}</span>
          <span class="top-bar"><i style="width:{{$s.Progress}}%"></i></span>
        </li>
        {{end}}
      </ol>
      {{else}}
      <p class="scr-empty">暂无订阅数据</p>
      {{end}}
    </div>
  </section>

  <section class="scr-bottom">
    <div class="panel">
      <div class="panel-head">
        <h2>今日到期</h2>
        <span>{{len .D.DueToday}} 条</span>
      </div>
      {{if .D.DueToday}}
      <ul class="today-list list-group list-group-flush">
        {{range .D.DueToday}}
        <li class="lv-{{.Eval.Level}}">
          <span class="tchip" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span>
          <span class="pkg">{{.PackageName}}</span>
          <span class="rem">{{.RemainShort}}</span>
        </li>
        {{end}}
      </ul>
      {{else}}
      <p class="scr-empty">今天没有到期</p>
      {{end}}
    </div>

    <div class="panel">
      <div class="panel-head">
        <h2>今日待打</h2>
        <span>{{.D.TodayDone}} / {{.D.TodayTasks}} 已完成{{if gt .D.TodayUrgent 0}} · 加急 {{.D.TodayUrgent}}{{end}}</span>
      </div>
      {{if .D.TodayList}}
      <ul class="today-list">
        {{range .D.TodayList}}
        <li class="{{if .Urgent}}urgent{{end}} lv-{{.Eval.Level}}">
          <span class="tchip" style="--tag:{{.PackageColor}}"><b>{{.CustomerTail}}</b>{{.CustomerName}}</span>
          <span class="pkg">{{.PackageName}}</span>
          <span class="asg{{if .AssigneeNone}} none{{end}}"><i style="background:{{.AssigneeHex}}"></i>{{.AssigneeLabel}}</span>
          {{if .Urgent}}<span class="badge text-bg-danger tag-urgent">加急</span>{{end}}
          <span class="rem">{{.RemainShort}}</span>
        </li>
        {{end}}
      </ul>
      {{else}}
      <p class="scr-empty">今天没有待打任务</p>
      {{end}}
    </div>
  </section>

  <section class="scr-recent">
    <span class="recent-label">最近追加</span>
    {{if .D.Recent}}
    <div class="recent-track">
      {{range .D.Recent}}
      <span class="recent-item"><b>{{.CustomerTail}}</b>{{.CustomerName}} · {{.PackageName}}
        {{if gt .DaysAdded 0}}<em>+{{.DaysAdded}} 天</em>{{end}}
        {{if gt .CountAdded 0}}<em>+{{.CountAdded}} 次</em>{{end}}
      </span>
      {{end}}
    </div>
    {{else}}
    <span class="scr-empty-inline">还没有追加记录</span>
    {{end}}
  </section>

  <footer class="scr-foot">代打台 v{{.D.Version}} · 数据每 {{.D.Refresh}} 秒自动刷新 · 按 F 全屏</footer>

  <div class="day-pop" id="day-pop" hidden></div>
</div>
{{end}}