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 %> |
||||
<script src="/textFit.js"></script> |
||||
<span id="submission_content"><% include submission_content %></span> |
||||
|
||||
@ -1,5 +1,235 @@
|
||||
<% 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/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