PHP读取clocktool JSON接口实现大屏在岗员工展示求助

我猜你大概率是遇到了JSON读取异常、页面自动刷新逻辑、大屏渲染适配这类常见痛点？下面针对这类场景给出具体的落地方案：

1. 稳定读取ClockTool的JSON数据 #

首先要确保PHP脚本能可靠获取并解析数据，同时处理网络请求失败、JSON格式错误等异常情况：

<?php
// 设置网络请求超时，避免大屏因请求卡顿无响应
$httpContext = stream_context_create([
    'http' => [
        'timeout' => 10 // 10秒超时阈值
    ]
]);

// 调用ClockTool的在岗员工接口
$rawJson = file_get_contents('https://your-clocktool-endpoint/on-duty-staff', false, $httpContext);

// 降级处理：请求失败时读取本地缓存
if ($rawJson === false) {
    $onDutyStaff = json_decode(file_get_contents('./cache/last_staff_data.json'), true) ?? [];
} else {
    $onDutyStaff = json_decode($rawJson, true);
    // 验证JSON解析结果
    if (json_last_error() !== JSON_ERROR_NONE) {
        $onDutyStaff = [];
        error_log('ClockTool JSON解析失败: ' . json_last_error_msg());
    } else {
        // 更新本地缓存，用于后续请求失败时兜底
        file_put_contents('./cache/last_staff_data.json', $rawJson);
    }
}
?>

2. 实现页面5分钟自动刷新 #

大屏页面需要无感知自动刷新，用HTML的<meta>标签最简洁，也可以用JS定时器做更灵活的控制：

<!DOCTYPE html>
<html>
<head>
    <!-- 每5分钟（300秒）自动刷新页面 -->
    <meta http-equiv="refresh" content="300">
    <title>在岗员工展示</title>
    <!-- 大屏适配样式，确保远距离清晰可见 -->
    <style>
        body {
            margin: 0;
            padding: 2.5rem;
            font-size: 3rem;
            text-align: center;
            background-color: #f5f5f5;
        }
        .staff-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 4rem;
        }
        .staff-card {
            background: white;
            padding: 2.5rem;
            border-radius: 12px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
        }
    </style>
</head>
<body>
    <h1>今日在岗员工</h1>
    <div class="staff-grid">
        <?php if (!empty($onDutyStaff)): ?>
            <?php foreach ($onDutyStaff as $staff): ?>
                <div class="staff-card">
                    <h3><?= htmlspecialchars($staff['name']) ?></h3>
                    <p>部门: <?= htmlspecialchars($staff['department']) ?></p>
                </div>
            <?php endforeach; ?>
        <?php else: ?>
            <p style="grid-column: 1 / -1;">暂无在岗员工信息</p>
        <?php endif; ?>
    </div>
</body>
</html>

3. 大屏场景的优化细节 #

• 缓存兜底：上面的脚本实现了本地缓存，避免接口故障导致大屏空白
• 安全转义：用htmlspecialchars()处理员工信息，防止XSS风险
• 视觉适配：用CSS Grid做自适应布局，字体和间距放大，适配大屏远距离查看
• 错误监控：添加日志记录，方便排查接口请求或JSON解析的问题

如果你的具体问题是接口认证、数据过滤（比如只展示特定部门）等，可以补充更多细节，我再针对性调整方案！

内容的提问来源于stack exchange，提问作者Zacks Delga