|
|
@@ -0,0 +1,849 @@
|
|
|
+<template>
|
|
|
+ <div class="course-target-result">
|
|
|
+ <div class="page-head page-head-flex">
|
|
|
+ <h2>
|
|
|
+ <span>课程基本情况</span>
|
|
|
+ </h2>
|
|
|
+ <el-button type="primary">导出报告</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="part-box part-box-pad">
|
|
|
+ <table class="table">
|
|
|
+ <tr>
|
|
|
+ <td>课程编码</td>
|
|
|
+ <td>{{ baseInfo.courseCode }}</td>
|
|
|
+ <td>课程名称</td>
|
|
|
+ <td>{{ baseInfo.courseName }}</td>
|
|
|
+ <td>课程类别</td>
|
|
|
+ <td>
|
|
|
+ <el-input
|
|
|
+ v-model="baseInfo.courseType"
|
|
|
+ placeholder="请填写课程类别"
|
|
|
+ size="small"
|
|
|
+ ></el-input>
|
|
|
+ </td>
|
|
|
+ <td>学分</td>
|
|
|
+ <td>
|
|
|
+ <el-input-number
|
|
|
+ v-model="baseInfo.stdScore"
|
|
|
+ placeholder="请录入学分"
|
|
|
+ size="small"
|
|
|
+ :min="0"
|
|
|
+ :max="999"
|
|
|
+ :controls="false"
|
|
|
+ style="width:100px"
|
|
|
+ ></el-input-number>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>考核方式</td>
|
|
|
+ <td>
|
|
|
+ <el-input
|
|
|
+ v-model="baseInfo.examType"
|
|
|
+ placeholder="请填写考核方式"
|
|
|
+ size="small"
|
|
|
+ ></el-input>
|
|
|
+ </td>
|
|
|
+ <td>开课时间</td>
|
|
|
+ <td>{{ baseInfo.courseStartTime }}</td>
|
|
|
+ <td>授课对象</td>
|
|
|
+ <td>{{ baseInfo.teachClazz }}</td>
|
|
|
+ <td>学时</td>
|
|
|
+ <td>
|
|
|
+ <el-input-number
|
|
|
+ v-model="baseInfo.teachHours"
|
|
|
+ placeholder="请录入学时"
|
|
|
+ :min="0"
|
|
|
+ :max="999"
|
|
|
+ :controls="false"
|
|
|
+ size="small"
|
|
|
+ style="width:100px"
|
|
|
+ ></el-input-number>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>选课人数</td>
|
|
|
+ <td>
|
|
|
+ <el-input-number
|
|
|
+ v-model="baseInfo.studentCount"
|
|
|
+ placeholder="请录入选课人数"
|
|
|
+ :min="0"
|
|
|
+ :max="999"
|
|
|
+ :controls="false"
|
|
|
+ size="small"
|
|
|
+ style="width:125px"
|
|
|
+ ></el-input-number>
|
|
|
+ </td>
|
|
|
+ <td>参评人数</td>
|
|
|
+ <td>{{ baseInfo.commentCount }}</td>
|
|
|
+ <td>课程目标达成度期望值</td>
|
|
|
+ <td colspan="3">
|
|
|
+ <el-select
|
|
|
+ v-model="baseInfo.courseTarget"
|
|
|
+ size="small"
|
|
|
+ style="width:100%"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in expectancyList"
|
|
|
+ :key="item"
|
|
|
+ :value="item"
|
|
|
+ :label="item"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>任课老师</td>
|
|
|
+ <td>{{ baseInfo.teachTeacher }}</td>
|
|
|
+ <td>评价负责人</td>
|
|
|
+ <td>
|
|
|
+ <el-input
|
|
|
+ v-model="baseInfo.commentManager"
|
|
|
+ placeholder="请填写评价负责人姓名"
|
|
|
+ size="small"
|
|
|
+ ></el-input>
|
|
|
+ </td>
|
|
|
+ <td>评价参与人</td>
|
|
|
+ <td colspan="3">
|
|
|
+ <el-input
|
|
|
+ v-model="baseInfo.commentUsers"
|
|
|
+ placeholder="请填写评价人姓名"
|
|
|
+ size="small"
|
|
|
+ ></el-input>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="page-head">
|
|
|
+ <h2>
|
|
|
+ <span>课程目标与毕业要求对应关系</span>
|
|
|
+ <el-popover
|
|
|
+ popper-class="el-popper-dark"
|
|
|
+ placement="right-start"
|
|
|
+ width="500"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <i class="el-icon-question" slot="reference"></i>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ 请根据《课程教学大纲》中的课程对“毕业要求”进行填写，课程目标及毕业要求指标点会自动显示题库系统试题标记内容，支持修改
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div class="part-box part-box-pad">
|
|
|
+ <table class="table">
|
|
|
+ <tr>
|
|
|
+ <th>课程目标</th>
|
|
|
+ <th>毕业要求指标</th>
|
|
|
+ <th>毕业要求</th>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="item in courseTargetList" :key="item.name">
|
|
|
+ <td style="width:240px">{{ item.name }}</td>
|
|
|
+ <td>
|
|
|
+ <el-input
|
|
|
+ v-model="item.indicator"
|
|
|
+ placeholder="请录入相关毕业要求指标"
|
|
|
+ type="textarea"
|
|
|
+ size="small"
|
|
|
+ :autosize="{ minRows: 4, maxRows: 8 }"
|
|
|
+ ></el-input>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <el-input
|
|
|
+ v-model="item.demand"
|
|
|
+ placeholder="请录入相关毕业要求"
|
|
|
+ type="textarea"
|
|
|
+ size="small"
|
|
|
+ :autosize="{ minRows: 4, maxRows: 8 }"
|
|
|
+ ></el-input>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="page-head">
|
|
|
+ <h2>
|
|
|
+ <span>课程目标评价方法</span>
|
|
|
+ <el-popover
|
|
|
+ popper-class="el-popper-dark"
|
|
|
+ placement="right-start"
|
|
|
+ width="500"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <i class="el-icon-question" slot="reference"></i>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ 评价环节如：考勤、作业、章节测验、小设计、课程论文、期末成绩等，在课程目标考核对应的考试环节的表格中打√
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div class="part-box part-box-pad">
|
|
|
+ <h4>{{ baseInfo.examName }}</h4>
|
|
|
+ <table class="table table-big">
|
|
|
+ <tr>
|
|
|
+ <th>评价环节</th>
|
|
|
+ <th>评价方式</th>
|
|
|
+ <th v-for="item in courseTargetList" :key="item.name">
|
|
|
+ {{ item.name }}
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="row in commentMothodList" :key="row.k">
|
|
|
+ <td v-if="row.rowspan" :rowspan="row.rowspan">
|
|
|
+ {{ row.mainTypeName }}
|
|
|
+ </td>
|
|
|
+ <td>{{ row.subTypeName }}</td>
|
|
|
+ <td v-for="item in row.courseTargetList" :key="item.name">
|
|
|
+ <el-checkbox v-model="item.checked"></el-checkbox>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="page-head">
|
|
|
+ <h2>
|
|
|
+ <span>课程目标考核分布</span>
|
|
|
+ <el-popover
|
|
|
+ popper-class="el-popper-dark"
|
|
|
+ placement="right-start"
|
|
|
+ width="500"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <i class="el-icon-question" slot="reference"></i>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ 课程目标分布会自动按题库系统里试卷下试题标记的属性内容进行显示
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div class="part-box part-box-pad">
|
|
|
+ <table class="table table-big text-center ">
|
|
|
+ <tr>
|
|
|
+ <th rowspan="2">试题号</th>
|
|
|
+ <th rowspan="2">合计</th>
|
|
|
+ <template v-for="(item, idex) in structs">
|
|
|
+ <th :key="idex" :colspan="item.subQuestionCount">{{ idex + 1 }}</th>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <template v-for="(item, index) in structs">
|
|
|
+ <th v-for="n in item.subQuestionCount" :key="`${index}-${n}`">
|
|
|
+ {{ n }}
|
|
|
+ </th>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="item in scores" :key="item.name">
|
|
|
+ <td>{{ item.name }}</td>
|
|
|
+ <td>{{ item.totalScore || "" }}</td>
|
|
|
+ <td v-for="(elem, eind) in item.scores" :key="eind">
|
|
|
+ {{ elem || "" }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <div class="chart-box" style="height:300px;margin-top:20px">
|
|
|
+ <v-chart
|
|
|
+ v-if="scoreDistributionChartOption"
|
|
|
+ :option="scoreDistributionChartOption"
|
|
|
+ ></v-chart>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="page-head">
|
|
|
+ <h2>
|
|
|
+ <span>课程目标达成评价结果</span>
|
|
|
+ <el-popover
|
|
|
+ popper-class="el-popper-dark"
|
|
|
+ placement="right-start"
|
|
|
+ width="500"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <i class="el-icon-question" slot="reference"></i>
|
|
|
+ <div>
|
|
|
+ <p>
|
|
|
+ 1.评价依据：填写通过考核什么内容实现课程目标的评价；
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 2.目标分值：对应考核环节的满分；
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 3.权重：对应考核环节在对应的课程目标中的权重，目标下各项权重相加等于1；
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 4.实际平均分：为参与评价的学生在该环节的平均分；
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 5.目标达成评价值：∑（实际平均分/目标分值*权重）；
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 6.整体课程目标达成评价值：为课程分目标达成评价值的最小值。
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </h2>
|
|
|
+ </div>
|
|
|
+ <div class="part-box part-box-pad">
|
|
|
+ <h4>课程考核成绩评价结果</h4>
|
|
|
+ <table class="table table-big">
|
|
|
+ <tr>
|
|
|
+ <th>课程目标</th>
|
|
|
+ <th>评价依据</th>
|
|
|
+ <th>评价环节</th>
|
|
|
+ <th>权重</th>
|
|
|
+ <th>目标分值</th>
|
|
|
+ <th>实际平均分</th>
|
|
|
+ <th>目标达成评价值</th>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <template v-for="item in courseTargetList">
|
|
|
+ <tr v-for="(step, sind) in item.steps" :key="`${item.name}-${sind}`">
|
|
|
+ <td v-if="!sind" :rowspan="item.steps.length" style="width:240px">
|
|
|
+ {{ item.name }}
|
|
|
+ </td>
|
|
|
+ <td v-if="!sind" :rowspan="item.steps.length">
|
|
|
+ <p v-for="item in item.indicator.split('\n')" :key="item">
|
|
|
+ {{ item }}
|
|
|
+ </p>
|
|
|
+ </td>
|
|
|
+ <td style="width:140px">{{ step.name }}</td>
|
|
|
+ <td style="width:80px">{{ step.rate }}</td>
|
|
|
+ <td style="width:100px">{{ step.score }}</td>
|
|
|
+ <td style="width:100px">{{ step.aveScore }}</td>
|
|
|
+ <td v-if="!sind" :rowspan="item.steps.length" style="width:140px">
|
|
|
+ {{ item.getVal }}
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </template>
|
|
|
+ <tr>
|
|
|
+ <td colspan="6">课程总目标</td>
|
|
|
+ <td>{{ totalGetVal }}</td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+
|
|
|
+ <div class="chart-box" style="height:400px;margin-top:20px">
|
|
|
+ <v-chart
|
|
|
+ v-if="courseTargetListChartOption"
|
|
|
+ :option="courseTargetListChartOption"
|
|
|
+ ></v-chart>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <table class="table text-center table-big">
|
|
|
+ <tr>
|
|
|
+ <th rowspan="3">姓名</th>
|
|
|
+ <th rowspan="3">学号</th>
|
|
|
+ <th colspan="5">课程目标1</th>
|
|
|
+ <th colspan="5">课程目标2</th>
|
|
|
+ <th colspan="5">课程目标2</th>
|
|
|
+ <th rowspan="3">学生成绩</th>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th colspan="3">期末考试(0.7)</th>
|
|
|
+ <th colspan="2">平时考试(0.3)</th>
|
|
|
+ <th colspan="3">期末考试(0.7)</th>
|
|
|
+ <th colspan="2">平时考试(0.3)</th>
|
|
|
+ <th colspan="3">期末考试(0.7)</th>
|
|
|
+ <th colspan="2">平时考试(0.3)</th>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <th>知识点1</th>
|
|
|
+ <th>知识点3</th>
|
|
|
+ <th>知识点4</th>
|
|
|
+ <th>平时作业</th>
|
|
|
+ <th>期中考试</th>
|
|
|
+ <th>知识点5</th>
|
|
|
+ <th>知识点6</th>
|
|
|
+ <th>知识点7</th>
|
|
|
+ <th>平时作业</th>
|
|
|
+ <th>期中考试</th>
|
|
|
+ <th>知识点8</th>
|
|
|
+ <th>知识点9</th>
|
|
|
+ <th>知识点10</th>
|
|
|
+ <th>平时作业</th>
|
|
|
+ <th>期中考试</th>
|
|
|
+ </tr>
|
|
|
+ <tr v-for="student in studentScores" :key="student.name">
|
|
|
+ <td>{{ student.name }}</td>
|
|
|
+ <td>{{ student.code }}</td>
|
|
|
+ <td v-for="n in student.scores" :key="n">
|
|
|
+ {{ n }}
|
|
|
+ </td>
|
|
|
+ <td>{{ student.totalScore }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="2">平均分</td>
|
|
|
+ <td v-for="n in aveStudentScores" :key="n">{{ n }}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="2">课程目标达成度</td>
|
|
|
+ <td colspan="5">0.67</td>
|
|
|
+ <td colspan="5">0.75</td>
|
|
|
+ <td colspan="5">0.82</td>
|
|
|
+ <td></td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="2">课程达成度</td>
|
|
|
+ <td colspan="15">0.67</td>
|
|
|
+ <td></td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { calcSum } from "../../../plugins/utils";
|
|
|
+export default {
|
|
|
+ name: "course-target-result",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ baseInfo: {
|
|
|
+ courseCode: "261062",
|
|
|
+ courseName: "高等数学",
|
|
|
+ courseType: "",
|
|
|
+ stdScore: undefined,
|
|
|
+ examType: "",
|
|
|
+ courseStartTime: "2022-2023学年第2学期",
|
|
|
+ teachClazz: "2019级生物科学2班",
|
|
|
+ teachHours: undefined,
|
|
|
+ studentCount: undefined,
|
|
|
+ commentCount: 45,
|
|
|
+ courseTarget: 0.7,
|
|
|
+ teachTeacher: "李老师",
|
|
|
+ commentManager: "",
|
|
|
+ commentUsers: "",
|
|
|
+ examName: "期末考试"
|
|
|
+ },
|
|
|
+ expectancyList: [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0],
|
|
|
+ totalGetVal: 0.67,
|
|
|
+ courseTargetList: [
|
|
|
+ {
|
|
|
+ name: "课程目标1",
|
|
|
+ indicator:
|
|
|
+ "系统掌握高等数学中的基本概念、基本方法、基本技巧(A1)\n熟练掌握求极限的基本方法与技巧、判断函数的连续性(A2)\n熟练掌握求导数的基本方法与技巧(A3)\n熟练掌握求不定积分与定积分的基本方法与技巧(A4)\n掌握一阶及二阶微分方程的解法(A5)\n熟练掌握多元函数极限的求法、偏导数及全微分的求法，复合函数求导的基本方法与技巧(A6)\n熟练掌握多元函数积分学的基本方法与解题技巧(A7)\n掌握级数敛散性判别法，简单的幂级数求和函数及函数展开成幂级数(A8)",
|
|
|
+ demand: "",
|
|
|
+ commentGist: "",
|
|
|
+ getVal: 0.67,
|
|
|
+ steps: [
|
|
|
+ {
|
|
|
+ name: "平时作业",
|
|
|
+ rate: "10%",
|
|
|
+ score: 40,
|
|
|
+ aveScore: 25.93
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "期中考查",
|
|
|
+ rate: "20%",
|
|
|
+ score: 5,
|
|
|
+ aveScore: 4.23
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "期末考试",
|
|
|
+ rate: "70%",
|
|
|
+ score: 10,
|
|
|
+ aveScore: 7.82
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "课程目标2",
|
|
|
+ indicator:
|
|
|
+ "掌握数列极限、函数极限的基本概念、性质并会求极限(B1)\n微分中值定理的证明及其应用(B2)\n隐函数求导(B3)\n幂级数求和函数及函数展开成幂级数(B4)",
|
|
|
+ demand: "",
|
|
|
+ commentGist: "",
|
|
|
+ getVal: 0.75,
|
|
|
+ steps: [
|
|
|
+ {
|
|
|
+ name: "平时作业",
|
|
|
+ rate: "10%",
|
|
|
+ score: 40,
|
|
|
+ aveScore: 27.93
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "期中考查",
|
|
|
+ rate: "20%",
|
|
|
+ score: 5,
|
|
|
+ aveScore: 4.23
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "期末考试",
|
|
|
+ rate: "70%",
|
|
|
+ score: 10,
|
|
|
+ aveScore: 7.82
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "课程目标3",
|
|
|
+ indicator:
|
|
|
+ "掌握微分的应用、微分中值定理的应用、函数的图形与性态、求函数的极值与最值(C1)\n掌握定积分几何应用(C2)\n掌握多元函数微分学的应用(C3)\n熟练掌握二重积分(C4)",
|
|
|
+ demand: "",
|
|
|
+ commentGist: "",
|
|
|
+ getVal: 0.82,
|
|
|
+ steps: [
|
|
|
+ {
|
|
|
+ name: "平时作业",
|
|
|
+ rate: "10%",
|
|
|
+ score: 40,
|
|
|
+ aveScore: 32.93
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "期中考查",
|
|
|
+ rate: "20%",
|
|
|
+ score: 5,
|
|
|
+ aveScore: 4.23
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "期末考试",
|
|
|
+ rate: "70%",
|
|
|
+ score: 10,
|
|
|
+ aveScore: 8.82
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ commentMothodList: [
|
|
|
+ {
|
|
|
+ mainTypeName: "平时成绩",
|
|
|
+ subTypeName: "考勤",
|
|
|
+ rowspan: 3,
|
|
|
+ courseTargetList: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ mainTypeName: "平时成绩",
|
|
|
+ subTypeName: "平时作业",
|
|
|
+ rowspan: 0,
|
|
|
+ courseTargetList: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ mainTypeName: "平时成绩",
|
|
|
+ subTypeName: "其中考查",
|
|
|
+ rowspan: 0,
|
|
|
+ courseTargetList: []
|
|
|
+ },
|
|
|
+ {
|
|
|
+ mainTypeName: "期末成绩",
|
|
|
+ subTypeName: "期末考试",
|
|
|
+ rowspan: 1,
|
|
|
+ courseTargetList: []
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ structs: [
|
|
|
+ {
|
|
|
+ subQuestionCount: 15,
|
|
|
+ score: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subQuestionCount: 5,
|
|
|
+ score: 2
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subQuestionCount: 6,
|
|
|
+ score: 5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ subQuestionCount: 3,
|
|
|
+ score: 10
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ scores: [],
|
|
|
+ scoreDistribution: [
|
|
|
+ {
|
|
|
+ name: "不及格",
|
|
|
+ val: 17.5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "60-69",
|
|
|
+ val: 19.3
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "70-79",
|
|
|
+ val: 20.7
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "80-89",
|
|
|
+ val: 35.5
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "90-100",
|
|
|
+ val: 7
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ scoreDistributionChartOption: null,
|
|
|
+ courseTargetListChartOption: null,
|
|
|
+ studentScores: [],
|
|
|
+ aveStudentScores: []
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initData() {
|
|
|
+ this.commentMothodList = this.commentMothodList.map((item, iindex) => {
|
|
|
+ item.k = this.$randomCode();
|
|
|
+ item.courseTargetList = this.courseTargetList.map((elem, eindex) => {
|
|
|
+ return {
|
|
|
+ name: elem.name,
|
|
|
+ checked: iindex + eindex > 2
|
|
|
+ };
|
|
|
+ });
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ // structs
|
|
|
+ let scores = [];
|
|
|
+ let targetScore = {
|
|
|
+ name: "目标分值",
|
|
|
+ totalScore: 0,
|
|
|
+ scores: []
|
|
|
+ };
|
|
|
+ this.structs.forEach(item => {
|
|
|
+ for (let i = 0; i < item.subQuestionCount; i++) {
|
|
|
+ targetScore.scores.push(item.score);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ scores.push(targetScore);
|
|
|
+
|
|
|
+ this.courseTargetList.forEach((item, iindex) => {
|
|
|
+ let ts = {
|
|
|
+ name: item.name,
|
|
|
+ totalScore: 0,
|
|
|
+ scores: []
|
|
|
+ };
|
|
|
+ this.structs.forEach(item => {
|
|
|
+ for (let i = 0; i < item.subQuestionCount; i++) {
|
|
|
+ const valid = iindex === i % 3;
|
|
|
+ ts.scores.push(valid ? item.score : 0);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ scores.push(ts);
|
|
|
+ });
|
|
|
+ this.scores = scores;
|
|
|
+ this.scores.forEach(item => (item.totalScore = calcSum(item.scores)));
|
|
|
+
|
|
|
+ this.scoreDistributionChartOption = this.getScoreDistributionChartOption();
|
|
|
+ this.courseTargetListChartOption = this.getCourseTargetListChartOption();
|
|
|
+
|
|
|
+ // student score
|
|
|
+ const students = ["周晓", "张华", "李佳"];
|
|
|
+ this.studentScores = students.map((item, index) => {
|
|
|
+ let scores = [];
|
|
|
+ for (let i = 0; i < 15; i++) {
|
|
|
+ scores[i] = Math.ceil(Math.random() * 12);
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ name: item,
|
|
|
+ code: "082001" + index,
|
|
|
+ scores,
|
|
|
+ totalScore: calcSum(scores)
|
|
|
+ };
|
|
|
+ });
|
|
|
+ let aveStudentScores = [];
|
|
|
+ let studentCount = this.studentScores.length;
|
|
|
+ for (let i = 0; i < 15; i++) {
|
|
|
+ const aveScore =
|
|
|
+ calcSum(this.studentScores.map(item => item.scores[i])) /
|
|
|
+ studentCount;
|
|
|
+ aveStudentScores.push(aveScore.toFixed(2) * 1);
|
|
|
+ }
|
|
|
+ const aveTotalScore =
|
|
|
+ calcSum(this.studentScores.map(item => item.totalScore)) / studentCount;
|
|
|
+ aveStudentScores.push(aveTotalScore.toFixed(2) * 1);
|
|
|
+ this.aveStudentScores = aveStudentScores;
|
|
|
+ },
|
|
|
+ getScoreDistributionChartOption() {
|
|
|
+ let options = {
|
|
|
+ color: ["#556dff", "#3A5AE5"],
|
|
|
+ title: {
|
|
|
+ text: "成绩分布图",
|
|
|
+ left: "center"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 40,
|
|
|
+ top: 60,
|
|
|
+ right: 80,
|
|
|
+ bottom: 40,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ name: "成绩(分)",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#363D59"
|
|
|
+ },
|
|
|
+ data: this.scoreDistribution.map(item => item.name),
|
|
|
+ axisLabel: {
|
|
|
+ color: "#6F7482",
|
|
|
+ interval: 0,
|
|
|
+ fontSize: 12,
|
|
|
+ margin: 12
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#EFF0F5"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ name: "百分比（%）",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#363D59"
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#6F7482"
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#EFF0F5"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#EFF0F5"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "占比",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 60,
|
|
|
+ data: this.scoreDistribution.map(item => item.val),
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ formatter: "{c}%",
|
|
|
+ position: "top"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ return options;
|
|
|
+ },
|
|
|
+ getCourseTargetListChartOption() {
|
|
|
+ let options = {
|
|
|
+ color: ["#556dff", "#f59a23"],
|
|
|
+ title: {
|
|
|
+ text: "课程目标达成评价值",
|
|
|
+ left: "center"
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: 40,
|
|
|
+ top: 40,
|
|
|
+ right: 80,
|
|
|
+ bottom: 30,
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: 0,
|
|
|
+ data: ["期望值", "达成值"],
|
|
|
+ itemWidth: 12,
|
|
|
+ itemHeight: 4,
|
|
|
+ itemGap: 22,
|
|
|
+ right: 40
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ name: "课程目标",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#363D59"
|
|
|
+ },
|
|
|
+ data: this.courseTargetList.map(item => item.name),
|
|
|
+ axisLabel: {
|
|
|
+ color: "#6F7482",
|
|
|
+ interval: 0,
|
|
|
+ fontSize: 12,
|
|
|
+ margin: 12
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#EFF0F5"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ name: "期望值",
|
|
|
+ min: 0,
|
|
|
+ max: 1,
|
|
|
+ interval: 0.1,
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#363D59"
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "#6F7482"
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#EFF0F5"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#EFF0F5"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "达成值",
|
|
|
+ type: "bar",
|
|
|
+ barWidth: 60,
|
|
|
+ data: this.courseTargetList.map(item => item.getVal),
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: "top"
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "期望值",
|
|
|
+ type: "line",
|
|
|
+ symbol: "none",
|
|
|
+ data: this.courseTargetList.map(item => this.totalGetVal)
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ return options;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.table {
|
|
|
+ td,
|
|
|
+ th {
|
|
|
+ padding: 6px 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.text-center {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+.table-big {
|
|
|
+ td,
|
|
|
+ th {
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
