算法评测平台前端。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

367 lines
14 KiB

<% this.title = '提交记录 #' + info.submissionId %>
<% include util %>
<% include header %>
<script src="<%- lib('textfit/2.3.1/textFit.min.js') %>"></script>
<style>
.single-subtask {
box-shadow: none !important;
}
.single-subtask > .title {
display: none;
}
.single-subtask > .content {
padding: 0 !important;
}
.accordion > .content > .accordion {
margin-top: 0;
margin-bottom: 0;
}
.accordion > .content > .accordion > .content {
margin-top: 0;
margin-bottom: 14px;
}
.accordion > .content > .accordion > .content > :last-child {
margin-bottom: -10px !important;
}
</style>
<span id="submission_content">
<div class="padding" id="vueAppFuckSafari">
<table class="ui very basic center aligned table" id="status_table">
<thead>
<tr>
<th>编号</th>
<th>题目</th>
<th>状态</th>
<th v-if="displayConfig.showScore">分数</th>
<th v-if="displayConfig.showUsage">总时间</th>
<th v-if="displayConfig.showUsage">内存</th>
<th v-if="displayConfig.showCode">代码 / 答案文件</th>
<th>提交者</th>
<th>提交时间</th>
<th v-if="showRejudge">重新评测</th>
</tr>
</thead>
<tbody>
<tr is="submission-item" v-bind:data="roughData" :config="displayConfig" :show-rejudge="showRejudge" :progress="getProgress()" :compiling="detailResult && !detailResult.compile"></tr>
</tbody>
</table>
<code-box :escape="false" v-bind:content="code">
<% if (formattedCode !== null) { %>
<a onclick="toggleFormattedCode()" class="ui button" style="position: absolute; top: 0px; right: -4px; border-top-left-radius: 0; border-bottom-right-radius: 0; ">
<template v-if="currentFormatted">
显示原始代码
</template>
<template v-if="!currentFormatted">
格式化代码
</template>
</a>
<% } %>
</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" :class="singleSubtask ? 'single-subtask' : '' " v-if="detailResult && detailResult.judge && detailResult.judge.subtasks">
<template v-for="subtask, $index in detailResult.judge.subtasks">
<div class="title" :class="singleSubtask ? 'active' : ''">
<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)" :indetail="true" :progress="getProgress($index)"></status-label>
</div>
<div class="three wide column" v-if="subtask.score != null">
得分:<span style="font-weight: normal; ">{{ Math.trunc(subtask.score) }}</span>
</div>
</div>
</div>
<div class="content" :class="singleSubtask ? 'active' : ''">
<div class="accordion">
<template v-for="curCase, $caseIndex in subtask.cases">
<div class="title" :class="checkTestcaseOK(curCase) ? '' : 'unexpandable'">
<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)" :indetail="true"></status-label>
</div>
<template v-if="checkTestcaseOK(curCase)">
<div class="three wide column">
得分:<span style="font-weight: normal; ">{{ Math.trunc(curCase.result.scoringRate * 100) }}</span>
</div>
<div class="three wide column" v-if="curCase.result.time != null && curCase.result.time !== NaN">
用时:<span style="font-weight: normal; ">{{ curCase.result.time }} ms</span>
</div>
<div class="three wide column" v-if="curCase.result.memory != null && curCase.result.memory !== NaN">
内存:<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="'输入文件(<span style=\'font-family: monospace; \'>'+ curCase.result.input.name +'</span>)'" :content="curCase.result.input.content"></code-box>
<code-box v-if="curCase.result.output" :title="'答案文件(<span style=\'font-family: monospace; \'>'+ curCase.result.output.name +'</span>)'" :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="<%- lib('vue/2.5.21/vue.min.js') %>"></script>
<script src="<%- lib('socket.io/2.2.0/socket.io.js') %>"></script>
<script src="<%- lib('jsondiffpatch/0.2.5/jsondiffpatch.min.js') %>"></script>
<% include submissions_item %>
<script type="text/x-template" id="codeBoxTemplate">
<div style="margin-top: 0px; margin-bottom: 14px; " v-if="content != null && content !== ''">
<p v-if="title" class="transition visible">
<strong v-html="title"></strong>
</p>
<div class="ui existing segment">
<slot></slot>
<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 = "/detail";
const displayConfig = <%- JSON.stringify(displayConfig) %>;
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 unformattedCode = <%- JSON.stringify(code) %>;
const formattedCode = <%- JSON.stringify(formattedCode) %>;
function toggleFormattedCode() {
if (vueApp.currentFormatted) {
vueApp.currentFormatted = false;
vueApp.code = unformattedCode;
} else {
vueApp.currentFormatted = true;
vueApp.code = formattedCode;
}
}
const vueApp = new Vue({
el: '#vueAppFuckSafari',
data: {
roughData: {
info: <%- JSON.stringify(info) %>,
result: <%- JSON.stringify(roughResult) %>,
running: false,
displayConfig: displayConfig
},
code: <%- JSON.stringify(preferFormattedCode && formattedCode !== null) -%> ? formattedCode : unformattedCode,
currentFormatted: <%- JSON.stringify(preferFormattedCode && formattedCode !== null) -%>,
detailResult: <%- JSON.stringify(detailResult) %>,
displayConfig: displayConfig,
},
computed: {
singleSubtask() {
return this.detailResult.judge.subtasks.length === 1;
},
showRejudge() {
return this.displayConfig.showRejudge && (!this.roughData.running);
}
},
methods: {
getStatusString(statusCode) {
return statusToString[statusCode];
},
firstNonAC(t) {
if (t.every(function(v){ return v === TestcaseResultType.Accepted;})) {
return TestcaseResultType.Accepted;
} else {
return t.find(function(r) { return r !== TestcaseResultType.Accepted;});
}
},
getSubtaskResult(t) {
if (t.cases.some(function(c){ return c.status === TaskStatus.Running;})) {
return "Running";
} else if (t.cases.some(function(c) { return c.status === TaskStatus.Waiting;})) {
return "Waiting";
} else if (t.cases.every(function(c){ return c.status === TaskStatus.Done || c.status === TaskStatus.Skipped;})) {
return this.getStatusString(this.firstNonAC(t.cases.filter(function(c) { return c.result; })
.map(function(c) { return 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 if (c.status === TaskStatus.Skipped) {
return "Skipped";
} else {
return "System Error";
}
},
checkTestcaseOK(c) {
return c.status === TaskStatus.Done;
},
getProgress(index) {
if (!this.detailResult || !this.detailResult.judge || !this.detailResult.judge.subtasks) return {
finished: 0,
total: 0
};
var isPending = status => [TaskStatus.Waiting, TaskStatus.Running].includes(status);
var subtaskProgress = [], allFinished = 0, allTotal = 0;
for (var i in this.detailResult.judge.subtasks) {
var subtaskFinished = 0, subtaskTotal = 0;
for (var j in this.detailResult.judge.subtasks[i].cases) {
subtaskTotal++, allTotal++;
if (!isPending(this.detailResult.judge.subtasks[i].cases[j].status)) subtaskFinished++, allFinished++;
}
subtaskProgress.push({
finished: subtaskFinished,
total: subtaskTotal
});
}
var allProgress = {
finished: allFinished,
total: allTotal
};
return typeof index === 'undefined' ? allProgress : subtaskProgress[index];
}
},
mounted() {
$(document).ready(function(){ $('.ui.accordion').accordion({ selector: { trigger: '.title:not(.unexpandable)' } })});
},
updated() {
$('.ui.accordion').off().accordion({ selector: { trigger: '.title:not(.unexpandable)' } });
}
});
if (token != null) {
const loadSocketIO = function () {
let currentVersion = 0;
const socket = io(socketUrl);
socket.on('connect', function () {
socket.on('start', function () {
vueApp.roughData.running = true;
console.log("Judge start!");
vueApp.detailResult = {};
});
socket.on('update', function (p) {
console.log("Delta: ", p);
if (p.from === currentVersion) {
currentVersion = p.to;
jsondiffpatch.patch(vueApp.detailResult, p.delta);
vueApp.detailResult = JSON.parse(JSON.stringify(vueApp.detailResult));// WTF?
vueApp.roughData.result = p.roughResult;
} else { // Some packets are dropped. Let's reset.
socket.close();
setTimeout(loadSocketIO, 0);
}
});
socket.on('finish', function (p) {
console.log("Judge finished");
vueApp.roughData.running = false;
vueApp.roughData.result = p.roughResult;
vueApp.detailResult = p.result;
socket.close();
});
socket.emit('join', token, function (data) {
console.log("join! ", data);
if (data && data.ok) {
if (data.finished) {
vueApp.roughData.result = data.roughResult;
if (!data.result) location.reload(true);
vueApp.detailResult = data.result;
socket.close();
} else {
if (data.running) {
// vueApp.roughData.running = true;
vueApp.detailResult = data.current.content;
// vueApp.roughData.result = data.roughResult;
currentVersion = data.current.version;
}
}
} else {
alert("ERROR: " + JSON.stringify(data));
}
});
});
};
loadSocketIO();
}
</script>
<script>
document.addEventListener('keydown', function (event) {
if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
var sel = window.getSelection();
var rg = document.createRange()
rg.selectNodeContents(document.querySelector('code'));
sel.removeAllRanges();
sel.addRange(rg);
event.preventDefault();
}
});
</script>
</span>
<% include footer %>