查看签到表

src/modules/mark/components/ScoreCheckSign.vue

@@ -0,0 +1,180 @@
+<template>
+  <el-dialog
+    class="modify-mark-params"
+    :visible.sync="modalIsShow"
+    top="0"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :show-close="false"
+    append-to-body
+    fullscreen
+    @open="search"
+  >
+    <div slot="title">
+      <h2 class="el-dialog__title">签到表详情</h2>
+      <span
+        >课程名称：{{ instance.courseName }}（{{ instance.courseCode }}）</span
+      >
+      <span>试卷编号：{{ instance.paperNumber }}</span>
+      <button class="el-dialog__headerbtn" @click="cancel"></button>
+    </div>
+
+    <div class="part-box part-box-filter part-box-flex">
+      <el-form ref="FilterForm" label-position="left" label-width="85px" inline>
+        <el-form-item label="签到表编号">
+          <el-input
+            v-model.trim="filter.packageCode"
+            placeholder="签到表编号"
+            clearable
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item label-width="0px">
+          <el-button type="primary" @click="search">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="part-box part-box-pad">
+      <el-table ref="TableList" :data="dataList">
+        <el-table-column
+          type="index"
+          label="序号"
+          width="70"
+          :index="indexMethod"
+        ></el-table-column>
+        <el-table-column prop="packageCode" label="签到表编号">
+        </el-table-column>
+        <el-table-column prop="count" label="图片数量"></el-table-column>
+        <el-table-column
+          class-name="action-column"
+          label="操作"
+          width="120"
+          fixed="right"
+        >
+          <template slot-scope="scope">
+            <el-button
+              class="btn-primary"
+              type="text"
+              @click="toViewSheetPaper(scope.row)"
+              >查看</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="part-page">
+        <el-pagination
+          background
+          layout="total, sizes, prev, pager, next, jumper"
+          :pager-count="5"
+          :current-page="current"
+          :total="total"
+          :page-size="size"
+          @current-change="toPage"
+          @size-change="pageSizeChange"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- image-preview -->
+    <simple-image-preview
+      :cur-image="curImage"
+      @on-prev="toPrevImage"
+      @on-next="toNextImage"
+      ref="SimpleImagePreview"
+    ></simple-image-preview>
+
+    <div slot="footer"></div>
+  </el-dialog>
+</template>
+
+<script>
+import { packageListPage } from "../api";
+import SimpleImagePreview from "@/components/SimpleImagePreview";
+
+export default {
+  name: "score-check-sign",
+  components: { SimpleImagePreview },
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      filter: {
+        packageCode: "",
+      },
+      current: 1,
+      size: this.GLOBAL.pageSize,
+      total: 0,
+      dataList: [],
+      // img view
+      curImage: {},
+      curImageIndex: 0,
+      imageList: [],
+    };
+  },
+  methods: {
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async getList() {
+      const datas = {
+        ...this.filter,
+        examId: this.instance.examId,
+        paperNumber: this.instance.paperNumber,
+        pageNumber: this.current,
+        pageSize: this.size,
+      };
+      const data = await packageListPage(datas);
+      this.dataList = data.records;
+      this.total = data.total;
+    },
+    toPage(page) {
+      this.current = page;
+      this.getList();
+    },
+    search() {
+      this.toPage(1);
+    },
+    toViewSheetPaper(row) {
+      this.curImageIndex = 0;
+      this.imageList = (row.urls || []).map((url, index) => {
+        return { url, index: index + 1 };
+      });
+      this.selectImage(this.curImageIndex);
+      this.$refs.SimpleImagePreview.open();
+    },
+    selectImage(index) {
+      this.curImage = this.imageList[index];
+    },
+    toPrevImage() {
+      if (this.curImageIndex === 0) {
+        this.curImageIndex = this.imageList.length - 1;
+      } else {
+        this.curImageIndex--;
+      }
+
+      this.selectImage(this.curImageIndex);
+    },
+    toNextImage() {
+      if (this.curImageIndex === this.imageList.length - 1) {
+        this.curImageIndex = 0;
+      } else {
+        this.curImageIndex++;
+      }
+
+      this.selectImage(this.curImageIndex);
+    },
+  },
+};
+</script>

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

@@ -1,23 +1,17 @@
 <template>
   <div class="report-college">
     <report-box
-      v-for="(chartPage, cindex) in collegeCharts"
-      :key="`chart-${cindex}`"
+      v-for="(page, pindex) in pages"
+      :key="pindex"
       title="学院成绩分析"
     >
       <div
-        v-for="(chart, index) in chartPage"
-        :key="index"
+        v-for="(chart, index) in page.charts"
+        :key="`chart-${index}`"
         class="college-chart"
       >
         <v-chart :option="chart" :init-options="initOption"></v-chart>
       </div>
-    </report-box>
-    <report-box
-      v-for="(tgroup, tindex) in collegeTables"
-      :key="`table-${tindex}`"
-      title="学院成绩分析"
-    >
       <table class="table table-border">
         <tr>
           <th>学院</th>
@@ -29,7 +23,7 @@
           <th>优秀数</th>
           <th>优秀率(%)</th>
         </tr>
-        <tr v-for="(item, ind) in tgroup" :key="ind">
+        <tr v-for="(item, ind) in page.tables" :key="ind">
           <td>{{ item.name }}</td>
           <td>{{ item.avgScore }}</td>
           <td>{{ item.maxScore }}</td>
@@ -47,7 +41,7 @@
 <script>
 import { mapState } from "vuex";
 import ReportBox from "./ReportBox.vue";
-import { sectionArr } from "./utils";
+import { sectionArr, getGroupNum, sectionArrFirstPage } from "./utils";
 import { getBarsOptions, initOption } from "./chart";
 
 export default {
@@ -55,8 +49,7 @@ export default {
   components: { ReportBox },
   data() {
     return {
-      collegeCharts: [],
-      collegeTables: [],
+      pages: [],
       initOption,
     };
   },
@@ -74,11 +67,38 @@ export default {
           name: item.college,
         };
       });
-      this.collegeCharts = sectionArr(
-        sectionArr(college, 6).map((data) => getBarsOptions(data)),
-        4
+      const maxChartCountPerPage = 4;
+      const maxTableCountPerPage = 30;
+      const groupNum = getGroupNum(college.length, 6);
+      const collegeCharts = sectionArr(college, groupNum).map((data) =>
+        getBarsOptions(data)
       );
-      this.collegeTables = sectionArr(college, 30);
+      let pages = [];
+      let curPage = { charts: [], tables: [] };
+      collegeCharts.forEach((item) => {
+        curPage.charts.push(item);
+        if (curPage.charts.length === maxChartCountPerPage) {
+          pages.push(curPage);
+          curPage = { charts: [], tables: [] };
+        }
+      });
+      const firstPageTableCount = Math.floor(
+        (maxChartCountPerPage - curPage.charts.length) *
+          (maxTableCountPerPage / maxChartCountPerPage)
+      );
+      console.log(firstPageTableCount);
+      const collegeTables = sectionArrFirstPage(
+        college,
+        maxTableCountPerPage,
+        firstPageTableCount
+      );
+      collegeTables.forEach((item) => {
+        curPage.tables = item;
+        pages.push(curPage);
+        curPage = { charts: [], tables: [] };
+      });
+      this.pages = pages;
+      console.log(pages);
     },
   },
 };

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

@@ -122,7 +122,7 @@ export function getBarsOptions(dataObj) {
       itemWidth: 14,
       bottom: 10,
       textStyle: {
-        fontSize: 19,
+        fontSize: 16,
       },
     },
     grid: {
@@ -152,8 +152,8 @@ export function getBarsOptions(dataObj) {
         },
       },
       axisLabel: {
-        fontSize: 16,
-        margin: 12,
+        fontSize: 14,
+        margin: 8,
         interval: 0,
         formatter: function (value) {
           if (value.length > 6) {
@@ -187,7 +187,7 @@ export function getBarsOptions(dataObj) {
           },
         },
         axisLabel: {
-          fontSize: 16,
+          fontSize: 14,
           color: "#555",
         },
       },

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

@@ -27,7 +27,7 @@ for (let i = 0; i < scoreCount; i++) {
 
 // 学院
 let college = [];
-let collegeCount = 30;
+let collegeCount = 15;
 for (let i = 0; i < collegeCount; i++) {
   college.push({
     college: "学院" + (i + 1),
@@ -62,7 +62,7 @@ let teacherCount = 10;
 let teacherClass = [];
 for (let i = 0; i < teacherCount; i++) {
   teacher.push({
-    teacherName: "老师" + (i + 1),
+    teacher: "老师" + (i + 1),
     avgScore: getRandomNumer(0, 100),
     maxScore: getRandomNumer(90, 100),
     minScore: getRandomNumer(0, 30),
@@ -74,7 +74,7 @@ for (let i = 0; i < teacherCount; i++) {
   const classCount = getRandomNumer(1, 6);
   for (let j = 0; j < classCount; j++) {
     teacherClass.push({
-      teacherName: "老师" + (i + 1),
+      teacher: "老师" + (i + 1),
       className: "班级名称" + (j + 1),
       avgScore: getRandomNumer(0, 100),
       maxScore: getRandomNumer(90, 100),

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

@@ -11,6 +11,19 @@ export function sectionArr(arrayList, sectionLength) {
   return splitArr;
 }
 
+export function getGroupNum(num, min) {
+  const max = Math.ceil(min * 1.5);
+  if (num <= max) return num;
+  let rate = [];
+  for (let i = min; i <= max; i++) {
+    const r = (num % i) / i;
+    rate.push(r || 1);
+  }
+  const maxRate = getArrayMaxNum(rate);
+  const pos = rate.indexOf(maxRate);
+  return min + pos;
+}
+
 /**
  *
  * @param {Array} arrayList 要分段的数组

src/modules/mark/views/ScoreCheck.vue

@@ -88,16 +88,22 @@
       ref="ScoreCheckDetail"
       :instance="curRow"
     ></score-check-detail>
+    <!-- ScoreCheckSign -->
+    <score-check-sign
+      ref="ScoreCheckSign"
+      :instance="curRow"
+    ></score-check-sign>
   </div>
 </template>
 
 <script>
 import { scoreCheckListPage } from "../api";
 import ScoreCheckDetail from "../components/ScoreCheckDetail.vue";
+import ScoreCheckSign from "../components/ScoreCheckSign.vue";
 
 export default {
   name: "score-check",
-  components: { ScoreCheckDetail },
+  components: { ScoreCheckDetail, ScoreCheckSign },
   data() {
     return {
       filter: {
@@ -114,6 +120,10 @@ export default {
       curRow: {},
       multipleSelection: [],
       downloading: false,
+      // img view
+      curImage: {},
+      curImageIndex: 0,
+      imageList: [],
     };
   },
   methods: {
@@ -147,8 +157,8 @@ export default {
       this.$refs.ScoreCheckDetail.open();
     },
     toViewSign(row) {
-      // TODO:
-      console.log(row);
+      this.curRow = row;
+      this.$refs.ScoreCheckSign.open();
     },
   },
 };