pbl-student-table/src/components/scoreZong/get.vue

<template>
    <div class="sz_body" v-loading="loading">
        <div @click="exportExcel" v-show="false">导出</div>
        <div style="font-size: 18px;margin-bottom: 20px;">评分人数：<span class="color">{{ num }}</span>人 总平均分：<span
                class="color">{{ num ? score ? (score / num).toFixed(1) : 0 : 0 }}</span></div>
        <div class="test_box" v-for="(item, index) in testList" :key="index">
            <div class="testTitle">{{ item.title }}</div>
            <div class="testContent" v-if="item.type == '1'" v-for="(item2, index2) in item.array"
                :key="index + '-' + index2">
                <div class="testContent_title">{{ index2 + 1 }}、{{ item2.title }}</div>
                <div class="testContent_input">
                    <!-- <el-input v-model="item2.uscore" class="c_input" @change="numberPan(index, index2, item2.score)"
                        placeholder="请输入评分" /> -->
                    <span>平均分：</span>
                    <span class="color">{{ num ? item2.uscore ? (item2.uscore / num).toFixed(2) : 0 : 0 }}</span>
                </div>
            </div>
            <div v-if="item.type == '2'">
                <div class="test_ping" v-for="(answer, index2) in item.answerArray" :key="index + '-' + index2">
                    <span style="    min-width: fit-content;">{{ index2 + 1 }}.</span>
                    <span>{{ answer }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        courseid: {
            type: String,
            default: ''
        },
        title: {
            type: String,
            default: ''
        },
    },
    data() {
        return {
            userid:"",
            testList: [
                {
                    title: '教学目标（5分）',
                    type: '1',
                    array: [
                        {
                            title: '目标结构完整，能够清晰地表达学生的学习过程与预期成果。目标符合学情，具有可行性与逻辑递进性。目标体现学生本位与素养导向，不单纯停留在知识与技能层面。',
                            score: 5,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: '教学内容（5分）',
                    type: '1',
                    array: [
                        {
                            title: '重难点突出，符合课标与教材要求，不超纲。符合学情特点，贴近学生生活，体现积极向上的育人价值观。关注学生学习的最近发展区，有意识地展现因材施教的意图。',
                            score: 5,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: '教学过程（30分）',
                    type: '1',
                    array: [
                        {
                            title: '课堂结构合理、紧密，层次清楚，突出重难点的解决。（10分）',
                            score: 10,
                            uscore: 0,
                        },
                        {
                            title: '强调“学”的活动设计，教与学有机结合。（10分）',
                            score: 10,
                            uscore: 0,
                        },
                        {
                            title: '课堂管理有序，教学语言清晰准确，能及时、合理地解决课堂问题，体现良好的教学素养。（10分）',
                            score: 10,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: '教学方法与策略（20分）',
                    type: '1',
                    array: [
                        {
                            title: '符合教学内容与学科特点。落实有效，能体现出学生的学习成效，不流于形式。具有一定的新意，展现教师的独立思考与探究意识。',
                            score: 20,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: '教学工具（15分）',
                    type: '1',
                    array: [
                        {
                            title: '合理、科学地使用信息化技术、学习单、自制教学道具、辅助性资源等教学工具。',
                            score: 15,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: '教学评价（10分）',
                    type: '1',
                    array: [
                        {
                            title: '重视评价，有合理的评价手段与工具。评价落实有效，体现针对性和专业性。',
                            score: 10,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: '创新意识（10分）',
                    type: '1',
                    array: [
                        {
                            title: '教学空间的选择、布置有独特想法，且合理有效。敢于尝试多样化的教学形式，如主题式、大单元、项目式、游戏化等。开发特色有效的教学策略与手段，如小组合作探究、跨学科展演等，教师特色鲜明。',
                            score: 10,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: '教学效果（5分）',
                    type: '1',
                    array: [
                        {
                            title: '达成目标，整个过程有资源的生成。学习过程中学生有满足、成功与喜悦等体验，对后续学习更有信心，能力得到发展。',
                            score: 5,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: '加分项（10分）',
                    type: '1',
                    array: [
                        {
                            title: '某项优点特别突出，如教学风貌、教学理念、教学特色、教学手段等。',
                            score: 10,
                            uscore: 0,
                        }
                    ],
                },
                {
                    title: '评语',
                    type: '2',
                    answer: '',
                    answerArray: [],

                },
            ],
            num: 0,
            score: 0,
            loading: false,
            testArray: []
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        exportExcel() {
            try {


                var res = this.testArray;
                //如果value的json字段的key值和想要的headers值不一致时，可做如下更改
                //将和下面的Object.fromEntries结合，将json字段的key值改变为要求的excel的header值
                var array = [];
                for (var i = 0; i < res.length; i++) {
                    var _json = {};
                    _json["序号"] = i+1;
                    _json["姓名"] = res[i].username;
                    _json["教学目标（5分）"] = res[i]['test00'];
                    _json["教学内容（5分）"] = res[i]['test10'];
                    _json["教学过程-1课程结构（10分）"] = res[i]['test20'];
                    _json["教学过程-2活动设计（10分）"] = res[i]['test21'];
                    _json["教学过程-3秩序管理（10分）"] = res[i]['test22'];
                    _json["教学方法与策略（20分）"] = res[i]['test30'];
                    _json["教学工具（15分）"] = res[i]['test40'];
                    _json["教学评价（10分）"] = res[i]['test50'];
                    _json["创新意识（10分）"] = res[i]['test60'];
                    _json["教学效果（5分）"] = res[i]['test70'];
                    _json["加分项（10分）"] = res[i]['test80'];
                    _json["总分（110分）"] = res[i]['sum'];
                    _json["评语"] = res[i]['ping'];
                    array.push(_json);
                }

                var XLSX = require("xlsx");
                const workbook = XLSX.utils.book_new(); //创建一个新的工作簿对象
                let ws = XLSX.utils.json_to_sheet(array); //将json对象数组转化成工作表
                // ws["!cols"] = [
                //     //设置每一列的宽度
                //     { wch: 50 },
                //     { wch: 50 },
                //     { wch: 50 },
                // ];
                XLSX.utils.book_append_sheet(workbook, ws, "sheet1"); //把sheet添加到workbook里，第三个参数是sheet名
                XLSX.writeFile(workbook, this.title+".xlsx");
                // const wopts = { bookType: "xlsx", bookSST: false, type: "array" };//写入的样式bookType:输出的文件类型，type：输出的数据类型，bookSST: 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
                // const wbout = XLSX.write(workbook, wopts);// 浏览器端和node共有的API,实际上node可以直接使用xlsx.writeFile来写入文件,但是浏览器没有该API
                // FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), `${title} demo.xlsx`);//保存文件
                this.$message({
                    message: "导出成功",
                    type: "success",
                });

            } catch (e) {
                console.log(e, e.stack);
            }
        },
        numberPan(index, index2, score) {
            let _score = this.testList[index].array[index2].uscore
            if (/[^\d]/.test(_score) || _score < 0) {
                this.$message.error('请输入大于0的整数')
                this.testList[index].array[index2].uscore = 0
            }
            if (parseInt(_score) > parseInt(score)) {
                this.$message.error('不能输入大于得分的整数')
                this.testList[index].array[index2].uscore = score
            }
            this.$forceUpdate();
        },
        confirm() {
            let params = [
                {
                    cid: this.courseid,
                    uid: this.userid,
                    json: JSON.stringify(this.testList),
                },
            ];
            this.ajax
                .post(this.$store.state.api + "opCourseScore", params)
                .then((res) => {
                    console.log(res.data);
                    this.$message({
                        message: "添加成功",
                        type: "success",
                    });
                    this.getList();
                    this.$forceUpdate();
                })
                .catch((err) => {
                    console.error(err);
                });
        },
        getList() {
            let params =
            {
                cid: this.courseid,
            };
            this.loading = true
            this.ajax
                .get(this.$store.state.api + "getCourseScore", params)
                .then((res) => {
                    console.log(res.data);
                    if (res.data[0].length > 0) {
                        // this.testList = JSON.parse(res.data[0][0].json)
                        let data = res.data[0]
                        this.num = data.length
                        let sum = 0
                        for (var i = 0; i < data.length; i++) {
                            let item = data[i]
                            let _json = JSON.parse(item.json)
                            for (var j = 0; j < this.testList.length; j++) {
                                let test = this.testList[j]
                                if (test.type == '2') {
                                    if (_json[j].answer) {
                                        test.answerArray.push(_json[j].answer)
                                    }
                                } else {
                                    for (var k = 0; k < test.array.length; k++) {
                                        let _item = test.array[k]
                                        _item.uscore += _item.score / 5 * parseInt(_json[j].array[k].uscore)
                                        _item.num++
                                        sum += _item.score / 5 * parseInt(_json[j].array[k].uscore)
                                    }
                                }
                            }
                        }
                        this.score = sum
                        let testArray = []
                        for (var i = 0; i < data.length; i++) {
                            let item = data[i]
                            let _json = JSON.parse(item.json)
                            let _sum = 0
                            for (var j = 0; j < this.testList.length; j++) {
                                let test = this.testList[j]
                                if (test.type == '2') {
                                    if (_json[j].answer) {
                                        item['ping'] = _json[j].answer
                                    }else { 
                                        item['ping'] = ''
                                    }
                                } else {
                                    for (var k = 0; k < test.array.length; k++) {
                                        let _item = test.array[k]
                                        item['test'+j+k] =  _item.score / 5 * parseInt(_json[j].array[k].uscore)
                                        _sum += _item.score / 5 * parseInt(_json[j].array[k].uscore)
                                    }
                                }
                            }
                            item['sum'] = _sum
                            testArray.push(item)
                        }
                        this.testArray = testArray
                    }
                    this.loading = false
                    this.$forceUpdate();
                })
                .catch((err) => {
                    this.loading = false
                    console.error(err);
                });
        }
    },
}
</script>

<style scoped>
.sz_body {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.test_box {
    margin-bottom: 20px;
}

.testTitle {
    font-size: 16px;
    font-weight: 600;
}

.testContent {}

.testContent_title {
    margin-top: 10px;
}

.testContent_input {
    margin-top: 5px;
}

.test_ping {
    margin-top: 5px;
    display: flex;
    word-break: break-all;
}

.color {
    color: #3681fc;
}
</style>