|
|
@@ -0,0 +1,306 @@
|
|
|
+<template>
|
|
|
+ <div class="cjfxCjd">
|
|
|
+ <NavHeader />
|
|
|
+ <bread-crumb />
|
|
|
+
|
|
|
+ <div class="w-1200px m-auto flex flex-row justify-between">
|
|
|
+ <div class="w-188px">
|
|
|
+ <leftSider />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="w-1012px p-4 blueBg">
|
|
|
+
|
|
|
+ <div class="flex items-center">
|
|
|
+ <el-select class="mr-10px" v-model="normal_subject" placeholder="请选择学科" size="large">
|
|
|
+ <el-option label="全部" value="0" />
|
|
|
+ <el-option v-for="item in subject_list" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-select class="mr-10px" v-model="normal_classroom" placeholder="请选择班级" size="large">
|
|
|
+ <el-option label="全部" value="0" />
|
|
|
+ <el-option v-for="item in classroom_list" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ <el-select class="mr-10px" v-model="normal_school" placeholder="请选择学校" size="large">
|
|
|
+ <el-option label="全部" value="0" />
|
|
|
+ <el-option v-for="item in school_list" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between mt-4 exportBtn">
|
|
|
+ <div>
|
|
|
+ <el-button color="#003eee" type="primary" size="large">导出</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="h-200 mt-9px overflow-x-auto listMain" id="listMain"></div>
|
|
|
+
|
|
|
+ <div class="h-auto">
|
|
|
+ <div class="h-50px flex flex-wrap flex-grow justify-between rounded px-4 listMain_title">
|
|
|
+ <div class="singleT" v-for="(item,index) in listTitleShow" :key="index">{{item}}</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="h-200px flex flex-wrap flex-grow justify-between px-4" v-for="(item,index) in listShow" :key="index">
|
|
|
+ <div class="singleTSec" >{{ item.xx }}</div>
|
|
|
+ <div class="singleTSec">{{ item.bj }}</div>
|
|
|
+ <div class="singleTSec">{{ item.pm }}</div>
|
|
|
+
|
|
|
+ <div class="singleTSec" >{{ item.pjf }}</div>
|
|
|
+ <div class="singleTSec">{{ item.ykrs }}</div>
|
|
|
+ <div class="singleTSec">{{ item.skrs }}</div>
|
|
|
+ <div class="singleTSec" >{{ item.zgf }}</div>
|
|
|
+ <div class="singleTSec">{{ item.yxrs }}</div>
|
|
|
+ <div class="singleTSec">{{ item.yxl}}</div>
|
|
|
+ <div class="singleTSec" >{{ item.jgrs }}</div>
|
|
|
+ <div class="singleTSec">{{ item.dfrs }}</div>
|
|
|
+ <div class="singleTSec">{{ item.dfl }}</div>
|
|
|
+ <div class="singleTSec" >{{ item.nd }}</div>
|
|
|
+ <div class="singleTSec">{{ item.qfd }}</div>
|
|
|
+ <div class="singleTSec">{{ item.bzc }}</div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <commonFooter />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<route lang="json">
|
|
|
+{
|
|
|
+ "meta": {
|
|
|
+ "title": "成绩分析",
|
|
|
+ "breadcrumb": true
|
|
|
+ }
|
|
|
+}
|
|
|
+</route>
|
|
|
+<script lang="ts" setup>
|
|
|
+import * as echarts from 'echarts';
|
|
|
+
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+const router = useRouter();
|
|
|
+
|
|
|
+let normal_subject = $ref("");
|
|
|
+let normal_classroom = $ref("");
|
|
|
+let normal_school = $ref("");
|
|
|
+let normal_teacher = $ref("");
|
|
|
+
|
|
|
+
|
|
|
+let subject_list = [{
|
|
|
+ value: '1',
|
|
|
+ label: '语文'
|
|
|
+}, {
|
|
|
+ value: '2',
|
|
|
+ label: '数学'
|
|
|
+}]
|
|
|
+
|
|
|
+let classroom_list = [{
|
|
|
+ value: '1',
|
|
|
+ label: '英语'
|
|
|
+}, {
|
|
|
+ value: '2',
|
|
|
+ label: '体育'
|
|
|
+}, {
|
|
|
+ value: '3',
|
|
|
+ label: '音乐'
|
|
|
+}
|
|
|
+];
|
|
|
+
|
|
|
+let school_list = [{
|
|
|
+ value: '1',
|
|
|
+ label: '学校1'
|
|
|
+}, {
|
|
|
+ value: '2',
|
|
|
+ label: '学校2'
|
|
|
+}]
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ initChart()
|
|
|
+})
|
|
|
+
|
|
|
+const initChart = () => {
|
|
|
+ var myChart = echarts.init(document.getElementById('listMain'));
|
|
|
+ myChart.setOption({
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ data: ['[0-10]', '[10-20]', '[20-30]', '[30-40]', '[40-50]', '[50-60]', '[60-70]']
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'bar',
|
|
|
+ barWidth: '40',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ barBorderRadius: [20, 20, 0, 0],
|
|
|
+ color: '#6897FF',
|
|
|
+ label: {
|
|
|
+ show: true, //开启显示
|
|
|
+ position: 'top', //在上方显示
|
|
|
+ textStyle: { //数值样式
|
|
|
+ color: 'black',
|
|
|
+ fontSize: 16
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data: [120,200,200,150,80,70,110,130],
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+let listTitleShow = {
|
|
|
+ xx: "学校",
|
|
|
+ bj: "班级",
|
|
|
+ pm: "排名",
|
|
|
+ pjf: "平均分",
|
|
|
+ ykrs: "应考人数",
|
|
|
+ skrs: "实考人数",
|
|
|
+ zgf: "最高分",
|
|
|
+ yxrs: "优秀人数",
|
|
|
+ yxl: "优秀率",
|
|
|
+ jgrs: "及格人数",
|
|
|
+ jgl: "及格率",
|
|
|
+ dfrs: "低分人数",
|
|
|
+ dfl: "低分率",
|
|
|
+ nd: "难度",
|
|
|
+ qfd: "区分度",
|
|
|
+ bzc: "标椎差",
|
|
|
+}
|
|
|
+let listShow = [
|
|
|
+ {
|
|
|
+ xx: "总体",
|
|
|
+ bj: "初一（2）班",
|
|
|
+ pm: "1",
|
|
|
+ pjf: "87.45",
|
|
|
+ ykrs: "123",
|
|
|
+ skrs: "123",
|
|
|
+ zgf: "123",
|
|
|
+ yxrs: "98",
|
|
|
+ yxl: "89%",
|
|
|
+ jgrs: "98",
|
|
|
+ jgl: "89%",
|
|
|
+ dfrs: "23",
|
|
|
+ dfl: "90%",
|
|
|
+ nd: "0.92",
|
|
|
+ qfd: "0.92",
|
|
|
+ bzc: "87.45",
|
|
|
+
|
|
|
+ },
|
|
|
+ {
|
|
|
+ xx: "临沂市蒙阴县乡镇小学",
|
|
|
+ bj: "初一（2）班名",
|
|
|
+ pm: "1",
|
|
|
+ pjf: "87.45",
|
|
|
+ ykrs: "123",
|
|
|
+ skrs: "123",
|
|
|
+ zgf: "123",
|
|
|
+ yxrs: "98",
|
|
|
+ yxl: "89%",
|
|
|
+ jgrs: "98",
|
|
|
+ jgl: "89%",
|
|
|
+ dfrs: "23",
|
|
|
+ dfl: "90%",
|
|
|
+ nd: "0.92",
|
|
|
+ qfd: "0.92",
|
|
|
+ bzc: "87.45",
|
|
|
+ },
|
|
|
+
|
|
|
+]
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep .el-sub-menu__title {
|
|
|
+ background: #003eee;
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__header thead tr th {
|
|
|
+ background: #003eee !important;
|
|
|
+ color: #fff;
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__header thead tr th:first-child {
|
|
|
+ border-top-left-radius: 9px;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table__body tbody .el-table__row td {
|
|
|
+ background-color: transparent;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-dialog__footer {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.blueBg {
|
|
|
+ background: #F1F7FF;
|
|
|
+}
|
|
|
+
|
|
|
+.whiteBG {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.singlepart {
|
|
|
+ background-color: rgba($color: #ffffff, $alpha: 0.2);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.listMain {
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.listMain_title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ background: #003eee;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.singleT {
|
|
|
+ flex: 1;
|
|
|
+ line-height: 50px;
|
|
|
+ width: fit-content;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.singleD {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.singleTSec {
|
|
|
+ width: fit-content;
|
|
|
+ flex: 1;
|
|
|
+ line-height: 60px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+</style>
|
la