fair-web/views/judge_detail_item.ejs

<div class="padding">
  <table class="ui very basic center aligned table" id="status_table">
    <thead>
      <tr>
        <th>编号</th>
        <th>题目名称</th>
        <th>状态</th>
        <th>分数</th>
        <th>总时间</th>
        <th>内存</th>
        <th>代码</th>
        <th>提交者</th>
        <th>提交时间</th>
      </tr>
     </thead>
     <tbody>
       <tr>
        <td>#<%= judge.id %></td>
        <td><a href="<%= syzoj.utils.makeUrl(['problem', judge.problem_id]) %>">#<%= judge.problem_id %>. <%= judge.problem.title %></a></td>
        <% if (judge.allowedSeeResult) { %>
          <td class="status <%= getStatusMeta(judge.result.status).toLowerCase().split(' ').join('_') %>">
          <i class="<%= icon[getStatusMeta(judge.status)] || 'remove' %> icon"></i>
          <%= judge.result.status %>
          </td>
          <td class="score score_<%= parseInt(judge.result.score / 10) || 0 %>"><%= judge.result.score %></td>
          <td><%= judge.result.total_time %> ms</td>
          <td><%= judge.result.max_memory %> K</td>
          <td><%= syzoj.config.languages[judge.language].show %> / <%= syzoj.utils.formatSize(judge.code.length) %></td>
        <% } else { %>
          <td>隐藏</td>
          <td>隐藏</td>
          <td>隐藏</td>
          <td>隐藏</td>
          <td>隐藏</td>
        <% } %>
        <td><a href="<%= syzoj.utils.makeUrl(['user', judge.user_id]) %>"><%= judge.user.username %></a><% if (judge.user.nameplate) { %><%- judge.user.nameplate %><% } %></td>
        <td><%= syzoj.utils.formatDate(judge.submit_time) %></td>
       </tr>
     </tbody>
  </table>
  <% if (judge.allowedSeeCode) { %>
    <div class="ui existing segment"><pre style="margin-top: 0; margin-bottom: 0; "><code><%- judge.code %></code></pre></div>
  <% } %>
<% if (judge.result.compiler_output && judge.result.status === 'Compile Error' && judge.allowedSeeCode) { %>
  <h3 class="ui header">编译信息</h3>
  <div class="ui existing segment"><pre style="margin-top: 0; margin-bottom: 0; "><code><%- judge.result.compiler_output %></code></pre></div>
<% } else if (judge.allowedSeeResult) { %>
<div class="ui styled fluid accordion" id="testcases_list">
  <% for (let i = 0; i < judge.result.case_num; i++) { %>
  <%
  let testcase = judge.result[i], pending = false;
  if (!testcase) {
    pending = true;
    if (i == 0 || judge.result[i - 1]) {
      testcase = {
        status: 'Running'
      };
    } else {
      testcase = {
        status: 'Waiting'
      };
    }
  }
  %>
  <div class="title<% if (pending) { %> pending<% } %>"<% if (pending) { %> style="cursor: auto; "<% } %>>
    <div class="ui grid">
      <div class="three wide column"><i class="dropdown icon"></i>测试点 #<%= i + 1 %></div>
      <div class="four wide column status status_detail <%= getStatusMeta(testcase.status).toLowerCase().split(' ').join('_') %>">
      <i class="<%= icon[getStatusMeta(testcase.status)] || 'remove' %> icon"></i>
      <%= testcase.status %></div>
      <% if (!pending) { %>
        <div class="four wide column">用时：<span style="font-weight: normal; "><%= testcase.time_used %> ms</span></div>
        <div class="four wide column">内存：<span style="font-weight: normal; "><%= testcase.memory_used %> KiB</span></div>
      <% } %>
    </div>
  </div>
  <div class="content">
  <% if (!pending) { %>
    <p>
        <strong>输入文件</strong>
        <div class="ui existing segment"><pre style="margin-top: 0; margin-bottom: 0; "><code><%= testcase.input %></code></pre></div>
        <strong>期望输出</strong>
        <div class="ui existing segment"><pre style="margin-top: 0; margin-bottom: 0; "><code><%= testcase.answer %></code></pre></div>
        <strong>你的输出</strong>
        <div class="ui existing segment"><pre style="margin-top: 0; margin-bottom: 0; "><code><%= testcase.user_out %></code></pre></div>
    </p>
    <% } %>
  </div>
  <% } %>
</div>
<% } %>
</div>

<script>
$(function() {
  $('.ui.accordion').accordion({
    selector: {
      trigger: '.title:not(.pending)'
    }
  });
});
</script>

<% if (!isPending(judge.status)) { %><div><div id="stop_ajax"></div></div><% } %>
<script>
<% if (isPending(judge.status) && judge.allowedSeeResult) { %>
function update_judge_detail() {
  setTimeout(function () {
    $.get('/judge_detail/<%= judge.id %>/ajax', function (data) {
      var e = $('#judge_detail_item'), x = $($.parseHTML(data));
      if (e.find('td.status').text().trim() != x.find('td.status').text().trim()) {
        var a = e.find('#testcases_list > div');
        if (!a.length) {
          e.html(data);
        } else {
          e.find('#status_table').html(x.find('#status_table'));
          var b = x.find('#testcases_list > div');
          for (var i = 0; i < a.length; i++) {
            a[i].innerHTML = b[i].innerHTML;
            if (!$(b[i]).hasClass('pending')) $(a[i]).removeClass('pending');
            if (!$(b[i]).attr('style')) $(a[i]).attr('style', '');
          }

          if (!x.find('#stop_ajax').length) update_judge_detail();
        }
      }
      else if (!x.find('#stop_ajax').length) update_judge_detail();
    });
  }, 500);
}
update_judge_detail();
<% } %>
</script>