报告完成

src/assets/styles/report.scss

@@ -122,7 +122,7 @@ img {
     .foot-right {
       float: right;
       padding-right: 180px;
-      background-image: url(../images/report/bg-footer.png);
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAAAGCAYAAABNYTWkAAAAj0lEQVRYR2N0Duj4z0BFsHdDBSOycdPjnlLV/MxF0ijm2y74T1XzDycwophvcPo0Vc2/YGqKYr736RKqmr/VtAfF/F9XXKhqPpvOHhTzb968SVXzGUcTJGpuHE2Q+Eun0QSJFj6jJST+BDNaQqKFz2iVjT/BjFbZ+MNntMpGC5/RKnu0yiapSzVaZQ/vKhsAs/ylQ4nC3o8AAAAASUVORK5CYII=);
       background-repeat: no-repeat;
       background-position: right 10px;
     }
@@ -193,18 +193,6 @@ img {
       }
     }
   }
-  // icon
-  .page-icon {
-    display: inline-block;
-    vertical-align: middle;
-    width: 30px;
-    height: 30px;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-  .icon-star {
-    background-image: url(../images/report/icon-star.png);
-  }
 
   // page-title
   .page-title-1 {
@@ -251,11 +239,7 @@ img {
 // .cover
 .cover {
   &-page {
-    background-image: url(../images/report/cover-bg.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    background-position: left top;
-    color: #fff;
+    color: #333;
     font-size: 29px;
   }
   &-title {
@@ -295,102 +279,37 @@ img {
   }
 }
 // summary
-.summary-chart {
-  height: 340px;
+.report-summary {
+  .summary-chart {
+    height: 340px;
+  }
+  .page-title-1 {
+    display: none;
+  }
+  .page-content {
+    margin: 0;
+  }
+  .report-title {
+    font-size: 39px;
+    font-weight: 600;
+    color: $mainColor;
+    line-height: 70px;
+    text-align: center;
+  }
+  .report-sub-title {
+    font-size: 27px;
+    font-weight: 600;
+    color: $mainColor;
+    line-height: 39px;
+    text-align: center;
+    margin-bottom: 40px;
+  }
 }
 // college
 .college-chart {
   height: 340px;
 }
 
-// teacher
-.chart-teachers {
-  height: 550px;
-}
-
-.chart-teacher-grade {
-  height: 420px;
-}
-.page-chart-legend {
-  margin-top: 20px;
-  text-align: center;
-  li {
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0 20px;
-    font-size: 18px;
-
-    &::before {
-      content: "";
-      width: 16px;
-      height: 16px;
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 10px;
-      border-radius: 3px;
-    }
-    &:nth-of-type(1) {
-      &::before {
-        background: #3da0ff;
-      }
-    }
-    &:nth-of-type(2) {
-      &::before {
-        background: #4bcb74;
-      }
-    }
-    &:nth-of-type(3) {
-      &::before {
-        background: #975ee5;
-      }
-    }
-    &:nth-of-type(4) {
-      &::before {
-        background: #999999;
-      }
-    }
-    &:nth-of-type(5) {
-      &::before {
-        background-image: url(../images/report/icon-circle-bule.png);
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-    &:nth-of-type(6) {
-      &::before {
-        background-image: url(../images/report/icon-circle-yellow.png);
-        background-repeat: no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-  }
-}
-.chart-line {
-  height: 580px;
-}
-// table-other
-.question-table {
-  td.td-ques-name {
-    width: 310px;
-  }
-  .question-name {
-    white-space: nowrap;
-    overflow: hidden;
-    margin: 0 auto;
-
-    span {
-      display: inline-block;
-      vertical-align: middle;
-      &:first-child {
-        margin-right: 8px;
-        max-width: 240px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-}
 .classes-table {
   td.td-class-name {
     width: 240px;
@@ -477,23 +396,3 @@ img {
     }
   }
 }
-
-.range-tips {
-  margin: 15px 39px 0;
-  padding-left: 40px;
-  position: relative;
-  color: rgba(102, 102, 102, 1);
-  line-height: 31px;
-  &::before {
-    content: "";
-    display: block;
-    position: absolute;
-    width: 30px;
-    height: 30px;
-    top: 0;
-    left: 0;
-    background-image: url(../images/report/icon-star.png);
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-}

src/modules/mark/components/report/Report.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="report">
     <template v-if="dataReady">
-      <report-cover></report-cover>
+      <!-- <report-cover></report-cover> -->
       <report-summary></report-summary>
       <report-college></report-college>
       <report-class></report-class>
@@ -15,7 +15,7 @@
 <script>
 import reportData from "./data";
 import { mapMutations } from "vuex";
-import ReportCover from "./ReportCover.vue";
+// import ReportCover from "./ReportCover.vue";
 import ReportSummary from "./ReportSummary.vue";
 import ReportCollege from "./ReportCollege.vue";
 import ReportClass from "./ReportClass.vue";
@@ -34,7 +34,7 @@ export default {
     },
   },
   components: {
-    ReportCover,
+    // ReportCover,
     ReportSummary,
     ReportCollege,
     ReportClass,

src/modules/mark/components/report/ReportBox.vue

@@ -8,7 +8,7 @@
     </div>
     <div v-if="showFooter" class="page-foot">
       <div class="foot-left">
-        <p>版权所有：武汉启明泰和软件服务有限公司</p>
+        <!-- <p>版权所有：武汉启明泰和软件服务有限公司</p> -->
       </div>
       <div class="foot-right">
         <span class="page-num">PAGE</span>

src/modules/mark/components/report/ReportClass.vue

@@ -10,7 +10,7 @@
         :key="index"
         class="college-chart"
       >
-        <v-chart :option="chart"></v-chart>
+        <v-chart :option="chart" :init-options="initOption"></v-chart>
       </div>
     </report-box>
     <report-box
@@ -48,7 +48,7 @@
 import { mapState } from "vuex";
 import ReportBox from "./ReportBox.vue";
 import { sectionArr } from "./utils";
-import { getBarsOptions } from "./chart";
+import { getBarsOptions, initOption } from "./chart";
 
 export default {
   name: "report-class",
@@ -57,6 +57,7 @@ export default {
     return {
       classCharts: [],
       classTables: [],
+      initOption,
     };
   },
   computed: {

src/modules/mark/components/report/ReportCollege.vue

@@ -10,7 +10,7 @@
         :key="index"
         class="college-chart"
       >
-        <v-chart :option="chart"></v-chart>
+        <v-chart :option="chart" :init-options="initOption"></v-chart>
       </div>
     </report-box>
     <report-box
@@ -48,7 +48,7 @@
 import { mapState } from "vuex";
 import ReportBox from "./ReportBox.vue";
 import { sectionArr } from "./utils";
-import { getBarsOptions } from "./chart";
+import { getBarsOptions, initOption } from "./chart";
 
 export default {
   name: "report-college",
@@ -57,6 +57,7 @@ export default {
     return {
       collegeCharts: [],
       collegeTables: [],
+      initOption,
     };
   },
   computed: {

src/modules/mark/components/report/ReportQuestion.vue

@@ -6,7 +6,7 @@
       :title="title"
     >
       <div class="question-chart" :style="cgroup.style">
-        <v-chart :option="cgroup.chart"></v-chart>
+        <v-chart :option="cgroup.chart" :init-options="initOption"></v-chart>
       </div>
     </report-box>
     <report-box
@@ -42,7 +42,7 @@
 import { mapState } from "vuex";
 import ReportBox from "./ReportBox.vue";
 import { sectionArr } from "./utils";
-import { getBarPointTopicOptions } from "./chart";
+import { getBarPointTopicOptions, initOption } from "./chart";
 
 export default {
   name: "report-question",
@@ -55,6 +55,7 @@ export default {
       questionCharts: [],
       questionTables: [],
       chartSplitRange: 26,
+      initOption,
     };
   },
   computed: {

src/modules/mark/components/report/ReportSummary.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="report-summary">
     <report-box title="总览">
+      <h1 class="report-title">{{ baseinfo.examName }}</h1>
+      <h1 class="report-sub-title">{{ baseinfo.courseName }} | 成绩报告</h1>
       <h2 class="page-title-2 mb-20">考试概况</h2>
       <table class="table table-border mb-20">
         <tr>
@@ -32,8 +34,13 @@
       </table>
       <h2 class="page-title-2 mb-20">成绩分数段分析</h2>
       <div class="summary-chart mb-20">
-        <v-chart v-if="scoreRangeChart" :option="scoreRangeChart"></v-chart>
+        <v-chart
+          v-if="scoreRangeChart"
+          :option="scoreRangeChart"
+          :init-options="initOption"
+        ></v-chart>
       </div>
+      <p>说明：10-分数段表示10-20分，包含10分，不包含20分</p>
       <table class="table table-border">
         <tr>
           <th>分数段</th>
@@ -41,7 +48,7 @@
           <th>占比(%)</th>
         </tr>
         <tr v-for="(item, ind) in scoreRange" :key="ind">
-          <td>{{ item.minScore }}~{{ item.maxScore }}</td>
+          <td>{{ item.minScore }}-</td>
           <td>{{ item.studentCount }}</td>
           <td>{{ item.rate }}</td>
         </tr>
@@ -53,7 +60,7 @@
 <script>
 import { mapState } from "vuex";
 import ReportBox from "./ReportBox.vue";
-import { getScoreBarOptions } from "./chart";
+import { getScoreBarOptions, initOption } from "./chart";
 
 export default {
   name: "report-summary",
@@ -61,10 +68,11 @@ export default {
   data() {
     return {
       scoreRangeChart: null,
+      initOption,
     };
   },
   computed: {
-    ...mapState("report", ["overview", "scoreRange"]),
+    ...mapState("report", ["overview", "scoreRange", "baseinfo"]),
   },
   mounted() {
     this.initData();

src/modules/mark/components/report/ReportTeacher.vue

@@ -6,7 +6,7 @@
       title="任课老师分析"
     >
       <div v-for="(chart, index) in tpage" :key="index" class="college-chart">
-        <v-chart :option="chart"></v-chart>
+        <v-chart :option="chart" :init-options="initOption"></v-chart>
       </div>
     </report-box>
     <report-box
@@ -50,7 +50,7 @@
 import { mapState } from "vuex";
 import ReportBox from "./ReportBox.vue";
 import { sectionArr } from "./utils";
-import { getBarsOptions } from "./chart";
+import { getBarsOptions, initOption } from "./chart";
 
 export default {
   name: "report-teacher",
@@ -59,6 +59,7 @@ export default {
     return {
       teacherCharts: [],
       teacherTables: [],
+      initOption,
     };
   },
   mounted() {

src/modules/mark/components/report/chart.js

@@ -14,6 +14,10 @@ const textStyle = {
 };
 const animationIsOpen = false;
 
+export const initOption = {
+  renderer: "svg",
+};
+
 function getArrayMaxNum(arr) {
   return Math.max.apply(null, arr);
 }
@@ -65,7 +69,8 @@ export function getScoreBarOptions(dataObj) {
     xAxis: [
       {
         type: "category",
-        data: dataObj.map((item) => `${item.minScore}~${item.maxScore}`),
+        data: dataObj.map((item) => `${item.minScore}-`),
+        // data: dataObj.map((item) => `${item.minScore}~${item.maxScore}`),
         axisTick: {
           show: false,
         },
@@ -356,6 +361,11 @@ export function getBarPointTopicOptions(dataObj) {
             color: "rgba(233,233,233,1)",
           },
         },
+        axisLine: {
+          lineStyle: {
+            color: "rgba(233,233,233,1)",
+          },
+        },
         axisLabel: {
           fontSize: 17,
           margin: 20,

src/plugins/VueCharts.js

@@ -5,7 +5,7 @@ import { use } from "echarts/core";
 // import ECharts modules manually to reduce bundle size
 // 按需模块：https://github.com/apache/echarts/blob/master/src/echarts.all.ts
 // render type
-import { CanvasRenderer } from "echarts/renderers";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 
 // charts
 import {
@@ -29,6 +29,7 @@ import {
 
 use([
   CanvasRenderer,
+  SVGRenderer,
   BarChart,
   LineChart,
   // PieChart,