成绩统计 代码调整

src/views/exam/index.vue

@@ -11,7 +11,7 @@
         <el-input v-model="inputName" size="small" style="width: 200px;margin-right: 50px;margin-left: 10px;" placeholder="请输入筛选的名称" @change="changeInput" />
         <el-button size="small" type="primary" @click="goToFilter">查找</el-button>
       </el-row>
-      <el-table ref="filterTable" :data="filterTableData" border style="width: 100%" height="calc(100vh - 150px)">
+      <el-table ref="filterTable" :data="filterTableData" border style="width: 100%" height="calc(100vh - 190px)">
         <el-table-column prop="name" label="试卷名称" />
         <el-table-column v-if="isGzbShow" prop="classNames" label="所属班级">
           <template slot-scope="scope">

src/views/organization/examManage/gradeStatistics.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="title_content">{{ $route.query.name + '成绩统计' }}</div>
+    <div class="title_content">{{ $route.query.name + ' 成绩统计' }}</div>
     <el-button type="text" style="position: fixed;right: 20px;top: 70px;" @click="back">返回</el-button>
     <div class="gradeStatisticPane">
       <el-form
@@ -15,7 +15,7 @@
             :clearable="false"
             :placeholder="$t('global.choose')"
             filterable
-            @change="selectChange(field, formModel)"
+            @change="onChange"
           >
             <el-option
               v-for="option in classList"
@@ -27,28 +27,75 @@
         </el-form-item>
       </el-form>
     </div>
+    <div class="statisticChart">
+      <div id="mychart1" class="statisticChartLeft" />
+      <div id="mychart2" class="statisticChartRight" />
+    </div>
   </div>
 </template>
 <script>
+import * as echarts from 'echarts';
 import { getClassGradeStatistic } from '@/api/management/userexam';
 import { getClassListUnPage } from '@/api/company';
+import { getExamLessonDetail } from '@/api/management/exam';
 import localStore from 'storejs';
 export default {
     name: 'GradeStatistics',
     data() {
         return {
-            // orgId: {
-            //     type: 'select',
-            //     noClearable: true,
-            //     label: '班级:',
-            //     config: {
-            //         data: []
-            //     }
-            // }
             orgId:'',
+            myChart1:null,
             userNameList:[],
             gradeList:[],
-            classList:[]
+            classList:[],
+            durationList:[],
+            fullPoint:0,
+            passingPoint:0,
+            duration:0,
+            title:{
+                show:true,
+                text:'成绩分布',
+                textAlign:'center',
+                left:'50%',
+                top:'5px',
+                textStyle:{
+                    color:'#f00'
+                }
+            },
+            title1:{
+                show:true,
+                text:' 答题时长区间人数 ',
+                // 各分数区间人数统计
+                textAlign:'center',
+                left:'50%',
+                top:'5px',
+                textStyle:{
+                    color:'#f00'
+                }
+            },
+            yAxis1:{
+                position:'left',
+                name:'人数',
+                nameLocation:'end',
+                minInterval:1,
+                nameTextStyle:{
+                    align:'left',
+                    fontSize:14
+                },
+                axisLine:{show:true}
+            },
+            yAxis:{
+                position:'left',
+                name:'分数',
+                nameLocation:'end',
+                min:0,
+                nameTextStyle:{
+                    align:'left',
+                    fontSize:14
+                },
+                axisLine:{show:true}
+            },
+            durationInterval:[]
         };
     },
     async created() {
@@ -58,21 +105,143 @@ export default {
         });
         localStore.set(this.$route.path, { orgId: this.classList[0].value + '' });
         this.orgId = this.classList[0].value;
-    },
+        const res = await getExamLessonDetail(this.$route.query.examId);
-    async mounted() {
+        if (res.data) {
+            this.yAxis.max = res.data.fullPoint;
+            this.passingPoint = res.data.passingPoint;
+            this.duration = res.data.duration;
+        }
+        var chartDom1 = document.getElementById('mychart1');
+        this.myChart1 = echarts.init(chartDom1);
+        var chartDom2 = document.getElementById('mychart2');
+        this.myChart2 = echarts.init(chartDom2);
+        const eachInterval = this.duration / 6;
+        this.durationInterval = ['0-' + eachInterval,
+            eachInterval + '-' + eachInterval * 2,
+            eachInterval * 2 + '-' + eachInterval * 3,
+            eachInterval * 3 + '-' + eachInterval * 4,
+            eachInterval * 4 + '-' + eachInterval * 5,
+            eachInterval * 5 + '-' + eachInterval * 6
+        ];
         this.getClassGradeStatis();
     },
     methods: {
         back() {
             this.$router.go(-1);
         },
-        async getClassGradeStatis() {
+        getClassGradeStatis() {
-            const resp = await getClassGradeStatistic(this.orgId, this.$route.query.examId);
+            if (this.orgId) {
-            debugger;
+                this.userNameList = [];
-            const results = resp.results;
+                this.gradeList = [];
-            debugger;
+                // this.myChart1.restore();
-            if (results) { debugger; }
+                getClassGradeStatistic(this.orgId, this.$route.query.examId).then(resp=>{
-            // .forEach()
+                    const results = resp.data;
+                    if (results) {
+                        const gradeList = results.results;
+                        const countList = [0, 0, 0, 0, 0];
+                        if (gradeList.length > 0) {
+                            gradeList.forEach(each=>{
+                                this.userNameList.push(each.username || '');
+                                this.gradeList.push(each.score);
+                                this.durationList.push(each.duration || 0);
+                                countList[Math.floor((each.duration || 0) / (this.duration / 6))]++;
+                            });
+                            const option = {
+                                title:this.title,
+                                xAxis: {
+                                    type: 'category',
+                                    axisLabel:{
+                                        show :false
+                                    },
+                                    data:this.userNameList
+                                },
+                                tooltip:{
+                                    show:true,
+                                    trigger:'item'
+                                },
+                                yAxis: this.yAxis,
+                                series: [
+                                    {
+                                        symbolSize: 10,
+                                        data:this.gradeList,
+                                        type: 'scatter'
+                                    }
+                                ]
+                            };
+                            const option1 = {
+                                title1:this.title1,
+                                xAxis: {
+                                    name:'时长区间/s',
+                                    type: 'category',
+                                    data: this.durationInterval
+                                },
+                                yAxis: this.yAxis1,
+                                tooltip:{
+                                    show:true,
+                                    trigger:'axis'
+                                },
+                                series: [
+                                    {
+                                        data:countList,
+                                        type: 'bar'
+                                    }
+                                ]
+                            };
+                            option && this.myChart1 && this.myChart1.setOption(option);
+                            option1 && this.myChart2 && this.myChart2.setOption(option1);
+                            // debugger;
+                            // id": "92",
+                            // "userId": "92",
+                            // "account": "d8h4pz",
+                            // "username": "博涛.朱",
+                            // "examId": "92",
+                            // "examName": "博涛.朱",
+                            // "score": 29.38,
+                            // "usedTime": 727,
+                            // "result": "dbw206",
+                            // "duration": 429,
+                        }
+                    }
+                }).catch((error) => {
+                    const option = {
+                        title:this.title,
+                        xAxis: {
+                            type: 'category',
+                            data:[]
+                        },
+                        yAxis:this.yAxis,
+                        series: [
+                            {
+                                symbolSize: 20,
+                                data:[],
+                                type: 'scatter'
+                            }
+                        ]
+                    };
+                    const option1 = {
+                        title:this.title1,
+                        xAxis: {
+                            name:'时长区间/s',
+                            type: 'category',
+                            data: this.durationInterval
+                        },
+                        yAxis:this.yAxis1,
+                        series: [
+                            {
+                                data:[],
+                                type: 'bar'
+                            }
+                        ]
+                    };
+                    option && this.myChart1 && this.myChart1.setOption(option);
+                    option1 && this.myChart2 && this.myChart2.setOption(option1);
+                    this.$message.error(error.message);
+                });
+
+            }
+        },
+        onChange(data) {
+            this.getClassGradeStatis();
         }
     }
 };
@@ -85,8 +254,27 @@ export default {
 		font-size: 24px;
 		font-weight: bold;
 	}
-    .gradeStatisticPane{
+  .gradeStatisticPane{
-        margin: 0 auto;
+      margin: 0 auto;
-        width: 300px;
+      width: 300px;
-    }
+  }
+  .statisticChart{
+      /* margin-left: 50%; */
+      /* transform: translateX(-50%); */
+      width:90%;
+      display: flex;
+      margin-left:5%;
+  }
+  .statisticChartLeft{
+      width: 50%;
+      display: inline-block;
+      height: 700px;
+      /* border:1px #ccc solid */
+  }
+  .statisticChartRight{
+      width: 50%;
+      display: inline-block;
+      height: 700px;
+      /* border:1px #ccc solid */
+  }
 </style>