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.
zhishifufei_php/application/wap/view/first/topic/problem_result.html

171 lines
6.2 KiB

10 months ago
<!-- +---------------------------------------------------------------------- -->
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者,助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016~2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed 该系统并不是自由软件,未经许可不能去掉相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="title"}练习结果{/block}
{block name="head"}
<style>
.circle-container {
margin-top: .8rem;
text-align: center;
}
.circle-container p {
font-size: .22rem;
color: #999;
}
.percent-text {
color: #2c8eff;
}
.question-result-page .result-ft {
margin-top: .6rem;
}
</style>
{/block}
{block name="content"}
<div v-cloak id="app">
<div class="question-result-page">
<div class="circle-container">
<vue-circle-progress
ref="circle"
id="circle"
:progress="0"
:size="133"
:reverse="false"
line-cap="round"
:fill="fill"
empty-fill="rgba(213, 224, 236, 0.6)"
:animation-start-value="0.0"
:start-angle="Math.PI / 2"
insert-mode="append"
:thickness="5"
inner-text="正确率"
:show-percent="true"
><p>正确率</p></vue-circle-progress>
</div>
<div class="title">{{ result.title }}</div>
<ul class="basic">
<li>
<div>题目数</div>
<div>{{ result.test_paper_question.length }}</div>
</li>
<li>
<div>错题数</div>
<div>{{ result.wrong_question }}</div>
</li>
<li>
<div>未答数</div>
<div>{{ result.not_questions }}</div>
</li>
</ul>
<div class="result">
<div class="result-hd">
<div>答题情况</div>
<ul>
<li><span></span><span>正确</span></li>
<li><span></span><span>错误</span></li>
<li><span></span><span>未答</span></li>
</ul>
</div>
<div class="result-bd">
<a v-for="(item, index) in result.test_paper_question" :class="{ no: item.is_correct === 1, ok: item.is_correct === 2 }" href="javascript:">{{ index + 1 }}</a>
</div>
<div v-if="!footerHidden" class="result-ft">
<a :href="'{:url('topic/problem_sheet')}?from=problem_result&test_id=' + test_id + '&record_id=' + result.id">返回答题卡</a>
<!-- <a :href="'{:url('special/question_index')}?id=' + test_id">再考一次</a> -->
</div>
</div>
</div>
<quick-menu></quick-menu>
</div>
<script>
require([
'vue',
'helper',
'store',
'vue-circle-progress',
'quick'
], function (Vue, $h, $http, VueCircle) {
var vm = new Vue({
el: '#app',
components: {
'vue-circle-progress': VueCircle
},
data: {
test_id: 0,
result: {
title: '--',
score: 0,
grade: '--',
test_paper_question: [],
wrong_question: 0,
duration_time: '00:00:00'
},
fill : { gradient: ["rgba(44, 142, 255, 1)", "rgba(44, 142, 255, 0.05)"] },
footerHidden: false
},
created: function () {
this.test_id = $h.getParmas('test_id');
this.footerHidden = $h.getParmas('from') === 'question_user';
this.getResult();
},
methods: {
getResult: function () {
$h.loadFFF();
$http.baseGet($h.U({
c: 'topic',
a: 'examinationResults',
q: {
test_id: this.test_id,
type: 1
}
}), function (res) {
$h.loadClear();
var result = res.data.data;
var questions = result.test_paper_question;
var duration = result.duration
var hours = Math.floor(duration / 3600000);
var minutes = Math.floor((duration - hours * 3600000) / 60000);
var seconds = Math.floor((duration - hours * 3600000 - minutes * 60000) / 1000);
if (hours < 10) {
hours = '0' + hours;
}
if (minutes < 10) {
minutes = '0' + minutes;
}
if (seconds < 10) {
seconds = '0' + seconds;
}
result.duration_time = hours + ':' + minutes + ':' + seconds;
for (var i = questions.length; i--;) {
if (!Array.isArray(questions[i].userAnswer)) {
Object.assign(questions[i], questions[i].userAnswer);
}
}
vm.$refs.circle.updateProgress(parseInt(result.accuracy));
vm.result = result;
}, function () {
window.location.replace($h.U({
c: 'topic',
a: 'question_user'
}));
});
}
}
});
});
</script>
{/block}