|
|
@@ -18,6 +18,8 @@
|
|
|
>
|
|
|
</b-field>
|
|
|
</div>
|
|
|
+ <!--成绩图表-->
|
|
|
+ <div class="chart"><canvas id="result-chart"></canvas></div>
|
|
|
<!--题目table-->
|
|
|
<div class="question-list">
|
|
|
<b-table :data="data" paginated per-page="5" detailed detail-key="id">
|
|
|
@@ -92,19 +94,49 @@
|
|
|
</div>
|
|
|
</page-body>
|
|
|
<!-- 成绩比例调控模态框 -->
|
|
|
- <b-modal :active.sync="isCardModalActive" :width="320" scroll="keep">
|
|
|
+ <b-modal :active.sync="isCardModalActive" width="420px" scroll="keep">
|
|
|
<div class="card">
|
|
|
<div class="title">
|
|
|
成绩比例调控<small> 请按百分比填写</small>
|
|
|
</div>
|
|
|
<div class="content">
|
|
|
- <b-field label="文档作业比例"> <b-input></b-input> </b-field>
|
|
|
- <b-field label="互评作业比例"> <b-input></b-input> </b-field>
|
|
|
- <b-field label="代码作业比例"> <b-input></b-input> </b-field>
|
|
|
- <a class="button is-link" @click="isCardModalActive = false"
|
|
|
- >确认调整</a
|
|
|
- >
|
|
|
+ <div class="homework-item">
|
|
|
+ <label>文档作业</label>
|
|
|
+ <div class="homework-percent">
|
|
|
+ <span>第一次作业</span>
|
|
|
+ <b-input></b-input>
|
|
|
+ </div>
|
|
|
+ <div class="homework-percent">
|
|
|
+ <span>第一次作业</span>
|
|
|
+ <b-input></b-input>
|
|
|
+ </div>
|
|
|
+ <div class="homework-percent">
|
|
|
+ <span>第一次作业</span>
|
|
|
+ <b-input></b-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="homework-item">
|
|
|
+ <label>互评作业</label>
|
|
|
+ <div class="homework-percent">
|
|
|
+ <span>第一次作业</span>
|
|
|
+ <b-input></b-input>
|
|
|
+ </div>
|
|
|
+ <div class="homework-percent">
|
|
|
+ <span>第一次作业</span>
|
|
|
+ <b-input></b-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="homework-item">
|
|
|
+ <label>代码作业</label>
|
|
|
+ <div class="homework-percent">
|
|
|
+ <span>第一次作业</span>
|
|
|
+ <b-input></b-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <a class="button is-link" @click="isCardModalActive = false"
|
|
|
+ >确认调整</a
|
|
|
+ >
|
|
|
</div>
|
|
|
</b-modal>
|
|
|
</div>
|
|
|
@@ -114,6 +146,9 @@ import { mapState } from "vuex";
|
|
|
import { getStudentCourseReviewList } from "@/api/review";
|
|
|
import PageHeader from "@/components/PageHeader";
|
|
|
import PageBody from "@/components/PageBody/index";
|
|
|
+import Chart from "chart.js";
|
|
|
+import BInput from "buefy/src/components/input/Input";
|
|
|
+
|
|
|
const data = [
|
|
|
{
|
|
|
id: 1,
|
|
|
@@ -283,6 +318,7 @@ const data = [
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
+ BInput,
|
|
|
PageHeader,
|
|
|
PageBody
|
|
|
},
|
|
|
@@ -300,7 +336,8 @@ export default {
|
|
|
{ id: 2, title: "代码作业题目" }
|
|
|
],
|
|
|
data,
|
|
|
- isCardModalActive: false
|
|
|
+ isCardModalActive: false,
|
|
|
+ myChart2: {}
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -319,6 +356,37 @@ export default {
|
|
|
getStudentCourseReviewList(this.courses.id).then(
|
|
|
value => (this.review = value.data)
|
|
|
);
|
|
|
+ //绘制图表
|
|
|
+ var resultChart = document.getElementById("result-chart");
|
|
|
+ var myChart2 = new Chart(resultChart, {
|
|
|
+ type: "bar",
|
|
|
+ data: {
|
|
|
+ labels: [
|
|
|
+ "0-30分段",
|
|
|
+ "30-60分段",
|
|
|
+ "60-70分段",
|
|
|
+ "70-80分段",
|
|
|
+ "80-90分段",
|
|
|
+ "90-100分段"
|
|
|
+ ],
|
|
|
+ datasets: [
|
|
|
+ {
|
|
|
+ label: "人数",
|
|
|
+ backgroundColor: "rgba(54,162,235,0.3)",
|
|
|
+ borderColor: "rgba(54,162,235,1)",
|
|
|
+ borderWidth: 1,
|
|
|
+ pointStrokeColor: "#fff",
|
|
|
+ pointStyle: "crossRot",
|
|
|
+ data: [6, 10, 34, 50, 80, 30],
|
|
|
+ cubicInterpolationMode: "monotone",
|
|
|
+ spanGaps: "false",
|
|
|
+ fill: "false"
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ options: {}
|
|
|
+ });
|
|
|
+ this.myChart2 = myChart2;
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
@@ -332,9 +400,12 @@ export default {
|
|
|
padding: 30px;
|
|
|
/*min-height: 80vh;*/
|
|
|
background-color: #ffffff;
|
|
|
+ .chart {
|
|
|
+ margin-top: 1.5rem;
|
|
|
+ }
|
|
|
}
|
|
|
.question-list {
|
|
|
- margin-top: 30px;
|
|
|
+ margin-top: 3rem;
|
|
|
}
|
|
|
.form-group {
|
|
|
display: flex;
|
|
|
@@ -346,21 +417,37 @@ export default {
|
|
|
.card {
|
|
|
padding: 30px;
|
|
|
.title {
|
|
|
+ padding-bottom: 5px;
|
|
|
font-size: 1.25rem;
|
|
|
+ border-bottom: 1px solid #dbdbdb;
|
|
|
small {
|
|
|
color: gray;
|
|
|
font-size: 1rem;
|
|
|
}
|
|
|
}
|
|
|
.content {
|
|
|
- a {
|
|
|
- margin-top: 30px;
|
|
|
- width: 100%;
|
|
|
+ .homework-item {
|
|
|
+ margin-bottom: 30px;
|
|
|
+ flex: 1;
|
|
|
+ label {
|
|
|
+ width: 100%;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 2px solid #dbdbdb;
|
|
|
+ }
|
|
|
+ .homework-percent {
|
|
|
+ margin-top: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ margin-right: 0.5rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
-.button {
|
|
|
- background-color: #6172ec;
|
|
|
+ a {
|
|
|
+ margin-top: 30px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
.homework-layout {
|
|
|
display: flex;
|
