t123yh
7 years ago
7 changed files with 350 additions and 103 deletions
@ -0,0 +1,43 @@ |
|||||||
|
<script> |
||||||
|
const iconList = { |
||||||
|
'Accepted': 'checkmark', |
||||||
|
'Wrong Answer': 'remove', |
||||||
|
'Runtime Error': 'bomb', |
||||||
|
'Invalid Interaction': 'ban', |
||||||
|
'Time Limit Exceeded': 'clock', |
||||||
|
'Memory Limit Exceeded': 'microchip', |
||||||
|
'Output Limit Exceeded': 'print', |
||||||
|
'File Error': 'file outline', |
||||||
|
'Waiting': 'hourglass half', |
||||||
|
'Running': 'spinner', |
||||||
|
'Compile Error': 'code', |
||||||
|
'Submitted': 'checkmark', // NOI contests |
||||||
|
'System Error': 'server', |
||||||
|
'No Testdata': 'folder open outline', |
||||||
|
'Partially Correct': 'minus', |
||||||
|
'Judgement Failed': 'server', |
||||||
|
'Skipped': 'ban' |
||||||
|
}; |
||||||
|
Vue.component('status-label', { |
||||||
|
template: '#statusIconTemplate', |
||||||
|
props: ['status'], |
||||||
|
computed: { |
||||||
|
icon() { |
||||||
|
if (this.status in iconList) { |
||||||
|
return iconList[this.status]; |
||||||
|
} else { |
||||||
|
return 'man'; |
||||||
|
} |
||||||
|
}, |
||||||
|
colorClass() { |
||||||
|
return this.status.toLowerCase().split(' ').join('_'); |
||||||
|
} |
||||||
|
} |
||||||
|
}) |
||||||
|
</script> |
||||||
|
<script type="text/x-template" id="statusIconTemplate"> |
||||||
|
<span class="status" :class="colorClass"> |
||||||
|
<i class="icon" :class="icon"></i> |
||||||
|
{{ status }} |
||||||
|
</span> |
||||||
|
</script> |
||||||
@ -1,4 +1,4 @@ |
|||||||
<% this.title = '提交记录 #' + judge.id %> |
<% this.title = '提交记录 #' + info.taskId %> |
||||||
<% include header %> |
<% include header %> |
||||||
<script src="/textFit.js"></script> |
<script src="/textFit.js"></script> |
||||||
<span id="submission_content"><% include submission_content %></span> |
<span id="submission_content"><% include submission_content %></span> |
||||||
|
|||||||
@ -1,5 +1,235 @@ |
|||||||
<% include util %> |
<% include util %> |
||||||
|
|
||||||
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> |
|
||||||
|
<div class="padding" id="vueApp"> |
||||||
|
<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 is="submission-item" v-bind:data="roughData"></tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
|
||||||
|
<code-box :escape="false" v-bind:content="code"></code-box> |
||||||
|
<code-box v-if="detailResult && detailResult.compile" :escape="false" title="编译信息" v-bind:content="detailResult.compile.message"></code-box> |
||||||
|
<code-box v-if="detailResult" title="系统信息" :escape="true" v-bind:content="detailResult.systemMessage"></code-box> |
||||||
|
|
||||||
|
<div class="ui styled fluid accordion" v-if="detailResult && detailResult.judge && detailResult.judge.subtasks"> |
||||||
|
<template v-for="subtask, $index in detailResult.judge.subtasks"> |
||||||
|
<div class="title"> |
||||||
|
<div class="ui grid"> |
||||||
|
<div class="three wide column"> |
||||||
|
<i class="dropdown icon"></i> |
||||||
|
子任务 #{{ $index + 1 }} |
||||||
|
</div> |
||||||
|
<div class="four wide column"> |
||||||
|
<status-label :status="getSubtaskResult(subtask)"></status-label> |
||||||
|
</div> |
||||||
|
<div class="three wide column">得分 |
||||||
|
<span style="font-weight: normal; ">{{ subtask.score }}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div class="accordion"> |
||||||
|
<template v-for="curCase, $caseIndex in subtask.cases"> |
||||||
|
<div class="title"> |
||||||
|
<div class="ui grid"> |
||||||
|
<div class="three wide column"> |
||||||
|
<i class="dropdown icon"></i> |
||||||
|
测试点 #{{ $caseIndex + 1 }} |
||||||
|
</div> |
||||||
|
<div class="four wide column"> |
||||||
|
<status-label :status="getTestcaseStatus(curCase)"></status-label> |
||||||
|
</div> |
||||||
|
<template v-if="checkTestcaseOK(curCase)"> |
||||||
|
<div class="three wide column">得分率 |
||||||
|
<span style="font-weight: normal; ">{{ (curCase.result.scoringRate * 100).toFixed(1) }}</span> |
||||||
|
</div> |
||||||
|
<div class="three wide column">用时 |
||||||
|
<span style="font-weight: normal; ">{{ curCase.result.time }} ms</span> |
||||||
|
</div> |
||||||
|
<div class="three wide column">内存 |
||||||
|
<span style="font-weight: normal; ">{{ curCase.result.memory }} KiB</span> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<template v-if="checkTestcaseOK(curCase)"> |
||||||
|
<code-box v-if="curCase.result.input" :title="'输入文件（'+ curCase.result.input.name +'）'" :content="curCase.result.input.content"></code-box> |
||||||
|
<code-box v-if="curCase.result.output" :title="'答案文件（'+ curCase.result.output.name +'）'" :content="curCase.result.output.content"></code-box> |
||||||
|
<code-box title="用户输出" :content="curCase.result.userOutput"></code-box> |
||||||
|
<code-box title="标准错误流" :content="curCase.result.userError"></code-box> |
||||||
|
<code-box title="Special Judge 信息" :content="curCase.result.spjMessage"></code-box> |
||||||
|
<code-box title="系统信息" :content="curCase.result.systemMessage"></code-box> |
||||||
|
</template> |
||||||
|
<code-box title="错误信息" :content="curCase.errorMessage"></code-box> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script> |
||||||
<script src="https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script> |
<script src="https://cdn.bootcss.com/socket.io/2.0.3/socket.io.js"></script> |
||||||
<script src="https://cdn.bootcss.com/jsondiffpatch/0.2.4/jsondiffpatch.js"></script> |
<script src="https://cdn.bootcss.com/jsondiffpatch/0.2.4/jsondiffpatch.js"></script> |
||||||
|
|
||||||
|
<% include submissions_item %> |
||||||
|
|
||||||
|
<script type="text/x-template" id="codeBoxTemplate"> |
||||||
|
<div style="" v-if="content != null && content !== ''"> |
||||||
|
<div></div> |
||||||
|
<h3 v-if="title" class="ui header">{{ title }}</h3> |
||||||
|
<div class="ui existing segment"> |
||||||
|
<pre v-if="escape" style="margin-top: 0; margin-bottom: 0; "><code>{{ content }}</code></pre> |
||||||
|
<pre v-if="!escape" style="margin-top: 0; margin-bottom: 0; "><code v-html="content"></code></pre> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</script> |
||||||
|
|
||||||
|
<script> |
||||||
|
Vue.component("code-box", { |
||||||
|
template: "#codeBoxTemplate", |
||||||
|
props: ['title', 'content', 'escape'], |
||||||
|
}); |
||||||
|
const socketUrl = <%- syzoj.utils.judgeServer('detail') %>; |
||||||
|
const token = <%- JSON.stringify(socketToken) %>; |
||||||
|
|
||||||
|
const TestcaseResultType = {}; |
||||||
|
(function (TestcaseResultType) { |
||||||
|
TestcaseResultType[TestcaseResultType["Accepted"] = 1] = "Accepted"; |
||||||
|
TestcaseResultType[TestcaseResultType["WrongAnswer"] = 2] = "WrongAnswer"; |
||||||
|
TestcaseResultType[TestcaseResultType["PartiallyCorrect"] = 3] = "PartiallyCorrect"; |
||||||
|
TestcaseResultType[TestcaseResultType["MemoryLimitExceeded"] = 4] = "MemoryLimitExceeded"; |
||||||
|
TestcaseResultType[TestcaseResultType["TimeLimitExceeded"] = 5] = "TimeLimitExceeded"; |
||||||
|
TestcaseResultType[TestcaseResultType["OutputLimitExceeded"] = 6] = "OutputLimitExceeded"; |
||||||
|
TestcaseResultType[TestcaseResultType["FileError"] = 7] = "FileError"; |
||||||
|
TestcaseResultType[TestcaseResultType["RuntimeError"] = 8] = "RuntimeError"; |
||||||
|
TestcaseResultType[TestcaseResultType["JudgementFailed"] = 9] = "JudgementFailed"; |
||||||
|
TestcaseResultType[TestcaseResultType["InvalidInteraction"] = 10] = "InvalidInteraction"; |
||||||
|
})(TestcaseResultType); |
||||||
|
|
||||||
|
const statusToString = {}; |
||||||
|
statusToString[TestcaseResultType.Accepted] = "Accepted"; |
||||||
|
statusToString[TestcaseResultType.WrongAnswer] = "Wrong Answer"; |
||||||
|
statusToString[TestcaseResultType.PartiallyCorrect] = "Partially Correct"; |
||||||
|
statusToString[TestcaseResultType.MemoryLimitExceeded] = "Memory Limit Exceeded"; |
||||||
|
statusToString[TestcaseResultType.TimeLimitExceeded] = "Time Limit Exceeded"; |
||||||
|
statusToString[TestcaseResultType.OutputLimitExceeded] = "Output Limit Exceeded"; |
||||||
|
statusToString[TestcaseResultType.RuntimeError] = "Runtime Error"; |
||||||
|
statusToString[TestcaseResultType.FileError] = "File Error"; |
||||||
|
statusToString[TestcaseResultType.JudgementFailed] = "Judgement Failed"; |
||||||
|
statusToString[TestcaseResultType.InvalidInteraction] = "Invalid Interaction"; |
||||||
|
|
||||||
|
const TaskStatus = {}; |
||||||
|
(function (TaskStatus) { |
||||||
|
TaskStatus[TaskStatus["Waiting"] = 0] = "Waiting"; |
||||||
|
TaskStatus[TaskStatus["Running"] = 1] = "Running"; |
||||||
|
TaskStatus[TaskStatus["Done"] = 2] = "Done"; |
||||||
|
TaskStatus[TaskStatus["Failed"] = 3] = "Failed"; |
||||||
|
TaskStatus[TaskStatus["Skipped"] = 4] = "Skipped"; |
||||||
|
})(TaskStatus); |
||||||
|
|
||||||
|
const vueApp = new Vue({ |
||||||
|
el: '#vueApp', |
||||||
|
data: { |
||||||
|
roughData: { |
||||||
|
info: <%- JSON.stringify(info) %>, |
||||||
|
result: <%- JSON.stringify(roughResult) %>, |
||||||
|
running: false |
||||||
|
}, |
||||||
|
code: <%- JSON.stringify(code) %>, |
||||||
|
detailResult: <%- JSON.stringify(detailResult) %> |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getStatusString(statusCode) { |
||||||
|
return statusToString[statusCode]; |
||||||
|
}, |
||||||
|
firstNonAC(t) { |
||||||
|
if (t.every(v => v === TestcaseResultType.Accepted)) { |
||||||
|
return TestcaseResultType.Accepted; |
||||||
|
} else { |
||||||
|
return t.find(r => r !== TestcaseResultType.Accepted); |
||||||
|
} |
||||||
|
}, |
||||||
|
getSubtaskResult(t) { |
||||||
|
if (t.cases.some(c => c.status === TaskStatus.Running)) { |
||||||
|
return "Running"; |
||||||
|
} else if (t.cases.some(c => c.status === TaskStatus.Waiting)) { |
||||||
|
return "Waiting"; |
||||||
|
} else if (t.cases.every(c => c.status === TaskStatus.Done)) { |
||||||
|
return this.getStatusString(this.firstNonAC(t.cases.map(c => c.result.type))); |
||||||
|
} else { |
||||||
|
return "System Error"; |
||||||
|
} |
||||||
|
}, |
||||||
|
getTestcaseStatus(c) { |
||||||
|
if (c.status === TaskStatus.Done) { |
||||||
|
return this.getStatusString(c.result.type); |
||||||
|
} else if (c.status === TaskStatus.Waiting) { |
||||||
|
return "Waiting"; |
||||||
|
} else if (c.status === TaskStatus.Running) { |
||||||
|
return "Running"; |
||||||
|
} else { |
||||||
|
return "System Error"; |
||||||
|
} |
||||||
|
}, |
||||||
|
checkTestcaseOK(c) { |
||||||
|
return c.status === TaskStatus.Done; |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
console.log("mounted"); |
||||||
|
setTimeout(() => $('.ui.accordion').accordion(), 500); |
||||||
|
}, |
||||||
|
updated() { |
||||||
|
console.log("updated"); |
||||||
|
$('.ui.accordion').accordion("refresh"); |
||||||
|
} |
||||||
|
}); |
||||||
|
if (token != null) { |
||||||
|
const socket = io(socketUrl); |
||||||
|
socket.on('connect', () => { |
||||||
|
socket.on('start', () => { |
||||||
|
vueApp.roughData.running = true; |
||||||
|
}); |
||||||
|
socket.on('update', (p) => { |
||||||
|
console.log("Updating"); |
||||||
|
console.log("Delta: " + JSON.stringify(p)); |
||||||
|
jsondiffpatch.patch(vueApp.detailResult, p.delta); |
||||||
|
}); |
||||||
|
socket.on('finish', (p) => { |
||||||
|
vueApp.roughData.running = false; |
||||||
|
vueApp.roughData.result = p.roughResult; |
||||||
|
vueApp.detailResult = p.result; |
||||||
|
}); |
||||||
|
socket.emit('join', token, (data) => { |
||||||
|
if (data && data.ok) { |
||||||
|
if (data.finished) { |
||||||
|
alert('This submission is finished but not reported to the server. Please try again later.'); |
||||||
|
} else { |
||||||
|
if (data.current.running) { |
||||||
|
vueApp.roughData.running = true; |
||||||
|
} |
||||||
|
vueApp.detailResult = data.current.current; |
||||||
|
} |
||||||
|
} else { |
||||||
|
alert("ERROR: " + JSON.stringify(data)); |
||||||
|
} |
||||||
|
}) |
||||||
|
}); |
||||||
|
} |
||||||
|
</script> |
||||||
|
|||||||
Loading…
Reference in new issue