寻求ASP.NET工时系统的径向24小时时间轴CSS/HTML实现方案

核心思路 #

默认环形图以0度（对应0点）为起点，我们将9点设为起始点（对应时钟270度方向），每小时对应15度（360°/24）。通过计算每个状态时间段的起始/结束角度，用CSS锥形渐变（conic-gradient）绘制状态弧，搭配时间刻度标记，最后通过ASP.NET控件绑定业务数据。

1. HTML结构（ASP.NET Repeater绑定） #

用Repeater动态生成每个状态的弧，同时添加时间刻度和中心展示区：

<div class="radial-timeline-container">
    <div class="radial-timeline">
        <!-- 动态生成状态弧 -->
        <asp:Repeater ID="rptTimelineStates" runat="server">
            <ItemTemplate>
                <div class="state-arc" 
                     style="--start-angle: <%# GetStartAngle((DateTime)Eval("EventFrom")) %>deg; 
                            --end-angle: <%# GetEndAngle((DateTime?)Eval("EventTo")) %>deg; 
                            --state-color: <%# GetStateColor((int)Eval("StateID")) %>">
                </div>
            </ItemTemplate>
        </asp:Repeater>

        <!-- 24小时刻度标记（从9点开始） -->
        <div class="time-markers">
            <% for (int i = 9; i < 33; i++) { 
                int hour = i % 24; %>
                <div class="time-marker" style="--angle: <%= (i-9)*15 %>deg">
                    <span><%= hour == 0 ? 24 : hour %></span>
                </div>
            <% } %>
        </div>

        <!-- 中心展示区 -->
        <div class="center-content">
            <span>今日工时统计</span>
        </div>
    </div>
</div>

2. CSS样式 #

实现环形背景、状态弧、刻度标记的视觉效果：

.radial-timeline-container {
    width: 400px;
    height: 400px;
    margin: 2rem auto;
    position: relative;
}

.radial-timeline {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    background: #f0f0f0; /* 背景灰色 */
    overflow: hidden;
}

.state-arc {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    --arc-length: calc(var(--end-angle) - var(--start-angle));
    background: conic-gradient(from var(--start-angle) at 50% 50%, 
                              var(--state-color) 0 var(--arc-length), 
                              transparent 0);
}

/* 时间刻度样式 */
.time-markers {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.time-marker {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform-origin: 50% 50%;
    transform: translateX(-50%) rotate(var(--angle));
    background: rgba(0,0,0,0.1);
}

.time-marker span {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%) rotate(calc(-1 * var(--angle)));
    font-size: 12px;
    font-weight: 500;
    color: #333;
}

.center-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

3. ASP.NET后台逻辑（数据绑定与角度计算） #

在后台代码中实现角度转换、颜色映射和数据绑定：

protected int GetStartAngle(DateTime eventFrom)
{
    // 以9点为起点，将时间转换为角度（每小时15度）
    int totalMinutes = (eventFrom.Hour - 9) * 60 + eventFrom.Minute;
    // 处理跨天情况，自动转换为0-360度范围
    return (totalMinutes * 360) % (24 * 60);
}

protected int GetEndAngle(DateTime? eventTo)
{
    DateTime targetTime = eventTo.HasValue ? eventTo.Value : DateTime.Now;
    int totalMinutes = (targetTime.Hour - 9) * 60 + targetTime.Minute;
    return (totalMinutes * 360) % (24 * 60);
}

protected string GetStateColor(int stateId)
{
    // 根据StateID自定义颜色映射，可根据业务调整
    return stateId switch
    {
        1 => "#2ecc71", // 工作状态
        2 => "#3498db", // 会议状态
        3 => "#f39c12", // 休息状态
        4 => "#e74c3c", // 离线状态
        _ => "#95a5a6", // 默认颜色
    };
}

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 获取当前Windows用户名
        string currentUser = Environment.UserName;
        // 从数据库读取当前用户的状态记录（调用存储过程）
        using (SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["YourConnString"].ConnectionString))
        {
            SqlCommand cmd = new SqlCommand("YourStatusSP", conn);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@UserName", currentUser);
            conn.Open();
            rptTimelineStates.DataSource = cmd.ExecuteReader();
            rptTimelineStates.DataBind();
            conn.Close();
        }
    }
}

4. 可选：使用SqlDataSource绑定 #

如果偏好SqlDataSource控件，可替换后台数据绑定逻辑：

<asp:SqlDataSource ID="sdsTimeline" runat="server" 
    ConnectionString="<%$ ConnectionStrings:YourConnString %>"
    SelectCommand="YourStatusSP" 
    SelectCommandType="StoredProcedure">
    <SelectParameters>
        <asp:Parameter Name="UserName" DefaultValue="<%# Environment.UserName %>" Type="String" />
    </SelectParameters>
</asp:SqlDataSource>

<asp:Repeater ID="rptTimelineStates" runat="server" DataSourceID="sdsTimeline">
    <!-- ItemTemplate 与之前一致 -->
</asp:Repeater>

注意事项 #

• 跨天处理：上述角度计算逻辑已支持跨天状态（比如前一天22点到今天10点），自动转换为有效角度范围。
• 兼容性：conic-gradient支持Chrome、Firefox、Edge等现代浏览器，如需兼容IE，可改用SVG路径绘制状态弧。
• 尺寸调整：修改.radial-timeline-container的width和height可缩放整个时间轴。

内容的提问来源于stack exchange，提问作者Shiveer Singh