［新增］chart.js依赖、成绩管理页图表

package.json

@@ -12,9 +12,11 @@
   },
   "dependencies": {
     "buefy": "^0.7.1",
+    "chart.js": "^2.7.3",
     "dayjs": "^1.7.8",
     "register-service-worker": "^1.5.2",
     "vue": "^2.5.17",
+    "vue-chartjs": "^3.4.0",
     "vue-markdown": "^2.2.4",
     "vue-router": "^3.0.1",
     "vuelidate": "^0.7.4",

src/assets/scss/_variables.scss

@@ -130,7 +130,7 @@ $pre-background: $background !default;
 
 // Link colors
 
-$link: #6172ec !default;
+$link: $blue !default;
 $link-invert: $blue-invert !default;
 $link-visited: $purple !default;
 

src/assets/scss/app.scss

@@ -48,7 +48,7 @@ $default-margin-between:1.5rem;
   }
   .menu-list {
     font-weight: bold;
-    font-size: 1.1rem;
+    font-size: 1rem;
     li {
       margin-bottom: 10px;
       a {
@@ -65,7 +65,7 @@ $default-margin-between:1.5rem;
     }
   }
   .is-active {
-    background-color: rgba(0, 0, 0, 0.18) !important;
+    background-color: rgba(255, 255, 255, 0.18) !important;
   }
 }
 

src/layouts/courseLayouts/LayoutStructure.vue

@@ -97,7 +97,8 @@ $top-section-height: 4.25rem;
   /*background-image: url("../../assets/sideBar.png");*/
   /*background-image: linear-gradient(to top, #493a9e 0%, #4f54e9 100%);*/
   /*background: linear-gradient(to top, #7c71bd 0%, #4f62e9 100%);*/
-  background: linear-gradient(to top, #7c71bdc7 0%, #6172ec 100%);
+  /*background: linear-gradient(to top, #7c71bdc7 0%, #6172ec 100%);*/
+  background: linear-gradient(to top, #20328ec7 0%, #0d0f23 100%);
   background-size: cover;
   position: sticky;
   overflow-y: auto;

src/views/teacher/Result/index.vue

@@ -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>&nbsp;&nbsp;请按百分比填写</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;

src/views/teacher/Review/assignment.vue

@@ -23,42 +23,59 @@
       <div class="data-table">
         <section>
           <b-tabs type="is-boxed">
-            <b-tab-item label="未评价">
+            <b-tab-item label="未评价"> <!--题目table--> </b-tab-item>
+            <b-tab-item label="互评中"></b-tab-item>
+            <b-tab-item label="提出异议"> </b-tab-item>
+            <b-tab-item label="互评完成">
               <!--题目table-->
-              <!--<div class="assignment-list">-->
-              <!--<b-table :data="data" paginated per-page="10" detailed detail-key="id">-->
-              <!--<template slot-scope="props">-->
-              <!--<b-table-column field="id" label="被评价小组ID"  numeric sortable>-->
-              <!--{{ props.row.id }}-->
-              <!--</b-table-column>-->
-              <!--<b-table-column field="reviewId" label="打分小组ID" numeric sortable>-->
-              <!--{{ props.row.reviewId }}-->
-              <!--</b-table-column>-->
-              <!--<b-table-column label="文档等级" sortable>-->
-              <!--{{ props.row.level }}-->
-              <!--</b-table-column>-->
-              <!--<b-table-column label="文档分数" field="score" numeric sortable>-->
-              <!--<span :class="['tag',type(props.row.score)]">-->
-              <!--{{ props.row. }}-->
-              <!--</span>-->
-              <!--</b-table-column>-->
-              <!--</template>-->
+              <div class="question-list">
+                <b-table
+                  :data="data"
+                  paginated
+                  per-page="5"
+                  detailed
+                  detail-key="id"
+                >
+                  <template slot-scope="props">
+                    <b-table-column
+                      field="id"
+                      label="被评价小组"
+                      numeric
+                      sortable
+                      centered
+                    >
+                      {{ props.row.id }}
+                    </b-table-column>
+                    <b-table-column label="评价小组" numeric centered>
+                      {{ props.row.reviewId }}
+                    </b-table-column>
+                    <b-table-column label="作业等级" centered>
+                      {{ props.row.level }}
+                    </b-table-column>
+                    <b-table-column
+                      field="score"
+                      label="作业评分"
+                      sortable
+                      centered
+                    >
+                      <span :class="['tag', type(props.row.score)]">
+                        {{ props.row.score }}
+                      </span>
+                    </b-table-column>
+                  </template>
 
-              <!--<template slot="detail" slot-scope="props">-->
-              <!--<article class="media">-->
-              <!--<div class="media-content">-->
-              <!--<div class="content">-->
-              <!--<strong>互评作业详情</strong>-->
-              <!--</div>-->
-              <!--</div>-->
-              <!--</article>-->
-              <!--</template>-->
-              <!--</b-table>-->
-              <!--</div>-->
+                  <template slot="detail" slot-scope="props">
+                    <article class="media">
+                      <div class="media-content">
+                        <div class="content">
+                          <strong>成绩详情{{ props.row.score }}}</strong>
+                        </div>
+                      </div>
+                    </article>
+                  </template>
+                </b-table>
+              </div>
             </b-tab-item>
-            <b-tab-item label="互评中"> </b-tab-item>
-            <b-tab-item label="提出异议"> </b-tab-item>
-            <b-tab-item label="互评完成"> </b-tab-item>
           </b-tabs>
         </section>
       </div>
@@ -94,7 +111,19 @@ export default {
       data
     };
   },
-  mounted() {}
+  mounted() {},
+  methods: {
+    type(value) {
+      const number = parseFloat(value);
+      if (number < 60) {
+        return "is-danger";
+      } else if (number >= 60 && number < 80) {
+        return "is-warning";
+      } else if (number >= 80) {
+        return "is-success";
+      }
+    }
+  }
 };
 </script>
 <style lang="scss" scoped>