update:数据看板页面开发

src/modules/teacher/data/exam/api.js

@@ -23,3 +23,9 @@ export function getConditionList(params) {
 export function getExamList(params) {
   return httpRequest.get('/api/zy/v3-teacher/statistics/total-list', { params })
 }
+/**
+ * 考试数据-看板（基本信息）
+ */
+export function getExamDataInfo(params) {
+  return httpRequest.get('/api/zy/v3-teacher/statistics/sheet-basic-info', { params })
+}

src/modules/teacher/data/exam/components/ExamInfo.vue

@@ -8,22 +8,26 @@
     <el-row :gutter="20" class="row-bg" justify="space-around">
       <el-col :span="8">
         <div class="title">总分</div>
-        <div><span class="num">100</span><span class="fen">分</span></div>
+        <div><span class="num">{{ dataInfo.paper_info.total_score }}</span><span class="fen">分</span></div>
       </el-col>
       <el-col :span="8">
         <div class="title">及格分数</div>
-        <div><span class="num">100</span><span class="fen">分</span></div>
+        <div><span class="num">{{ dataInfo.paper_info.pass_score }}</span><span class="fen">分</span></div>
       </el-col>
       <el-col :span="8">
         <div class="title">考试总时长</div>
-        <div><span class="num">100</span><span class="fen">小时</span></div>
+        <div><span class="num">{{ dataInfo.paper_info.times }}</span><span class="fen">小时</span></div>
       </el-col>
     </el-row>
   </el-card>
 </template>
 
 <script>
-export default {}
+export default {
+  props: {
+    dataInfo: { type: Object, default: () => ({}) }
+  }
+}
 </script>
 
 <style scoped>

src/modules/teacher/data/exam/components/QuestionType.vue

@@ -5,11 +5,11 @@
     </div>
     <div style="height: 350px; width: 90%; margin: 0 auto">
       <div id="type" style="width: 100%; height: 90%"></div>
-      <div style="margin-bottom: 10px">
+      <div style="margin-bottom: 10px" v-if="correctRate.subjective">
         <div class="dec dec1">
-          客观题正确率：<span style="color: #aa1941; font-size: 16px; font-weight: 400">待评价</span>
+          客观题正确率：<span style="color: #aa1941; font-size: 16px; font-weight: 400">{{ correctRate.objective.rate }}%</span>
         </div>
-        <div class="dec dec1">主观题正确率：<span class="dec" style="color: #919191">待评价</span></div>
+        <div class="dec dec1">主观题正确率：<span class="dec" style="color: #919191">{{ correctRate.subjective.rate }}%</span></div>
       </div>
     </div>
   </el-card>
@@ -18,8 +18,12 @@
 <script>
 import * as echarts from 'echarts'
 export default {
+  props: {
+    dataInfo: { type: Object, default: () => ({}) }
+  },
   data() {
     return {
+      correctRate: {},
       option: {
         tooltip: {
           trigger: 'axis',
@@ -27,7 +31,6 @@ export default {
             type: 'shadow'
           },
           formatter: function (data) {
-            console.log(data)
             const res = `<div>${data[0].axisValue}</div><div>${data[0].value}%</div>`
             return res
           }
@@ -86,8 +89,27 @@ export default {
     }
   },
   mounted() {
-    const myChart = echarts.init(document.getElementById('type'))
-    myChart.setOption(this.option)
+    this.initEchart()
+    this.initCorrectRate()
+    console.log(this.dataInfo.questions_info_2, '12')
+  },
+  methods: {
+    initEchart() {
+      const type = { 1: '单选', 2: '多选', 3: '问答', 5: '案例', 6: '判断', 7: '实操', 8: '情景' }
+      const data = this.dataInfo.questions_info.reduce((prev, cur) => {
+        prev.x.push(type[cur.type])
+        prev.y.push(cur.rate)
+        return prev
+      }, { x: [], y: [] })
+      this.option.xAxis[0].data = data.x
+      this.option.series[0].data = data.y
+      const myChart = echarts.init(document.getElementById('type'))
+      myChart.setOption(this.option)
+    },
+    initCorrectRate() {
+      this.correctRate = this.dataInfo.questions_info_2.reduce((a, b) => ({ ...a, [b.type]: b }), {})
+      console.log(this.correctRate, '=123')
+    }
   }
 }
 </script>

src/modules/teacher/data/exam/components/Result.vue

@@ -12,6 +12,9 @@
 <script>
 import * as echarts from 'echarts'
 export default {
+  props: {
+    dataInfo: { type: Object, default: () => ({}) }
+  },
   data() {
     return {
       option: {
@@ -39,8 +42,8 @@ export default {
               show: false
             },
             data: [
-              { value: 1048, name: '及格人数', itemStyle: { color: '#6C83CE' }, percent: '70%' },
-              { value: 735, name: '不及格人数', itemStyle: { color: '#D96685' }, percent: '30%' }
+              { value: 0, name: '及格人数', itemStyle: { color: '#6C83CE' } },
+              { value: 0, name: '不及格人数', itemStyle: { color: '#D96685' } }
             ]
           }
         ]
@@ -48,8 +51,18 @@ export default {
     }
   },
   mounted() {
-    const myChart = echarts.init(document.getElementById('main'))
-    myChart.setOption(this.option)
+    this.initEchart()
+  },
+  methods: {
+    initEchart() {
+      const data = [
+        { value: this.dataInfo.pass_info.yes, name: '及格人数', itemStyle: { color: '#6C83CE' } },
+        { value: this.dataInfo.pass_info.no, name: '不及格人数', itemStyle: { color: '#D96685' } }
+      ]
+      this.option.series[0].data = data
+      const myChart = echarts.init(document.getElementById('main'))
+      myChart.setOption(this.option)
+    }
   }
 }
 </script>

src/modules/teacher/data/exam/components/Score.vue

@@ -8,22 +8,26 @@
     <el-row :gutter="20" class="row-bg" justify="space-around">
       <el-col :span="8">
         <div class="title">平均分</div>
-        <div><span class="num">100</span><span class="fen">分</span></div>
+        <div><span class="num">{{ dataInfo.score_info.average }}</span><span class="fen">分</span></div>
       </el-col>
       <el-col :span="8">
         <div class="title">最高分</div>
-        <div><span class="num">100</span><span class="fen">分</span></div>
+        <div><span class="num">{{ dataInfo.score_info.max }}</span><span class="fen">分</span></div>
       </el-col>
       <el-col :span="8">
         <div class="title">最低分</div>
-        <div><span class="num">100</span><span class="fen">分</span></div>
+        <div><span class="num">{{ dataInfo.score_info.min }}</span><span class="fen">分</span></div>
       </el-col>
     </el-row>
   </el-card>
 </template>
 
 <script>
-export default {}
+export default {
+  props: {
+    dataInfo: { type: Object, default: () => ({}) }
+  }
+}
 </script>
 
 <style>

src/modules/teacher/data/exam/components/ScoreRange.vue

@@ -24,6 +24,9 @@ import SetScoreRange from './SetScoreRange.vue'
 import * as echarts from 'echarts'
 export default {
   components: { SetScoreRange },
+  props: {
+    dataInfo: { type: Object, default: () => ({}) }
+  },
   data() {
     return {
       data: [],
@@ -31,7 +34,11 @@ export default {
       isSetScoreRange: false,
       option: {
         tooltip: {
-          trigger: 'item'
+          trigger: 'item',
+          formatter: function (params) {
+            const str = params.data.name + '<br/>' + params.data.value + '人'
+            return str
+          }
         },
         legend: {
           bottom: '0',
@@ -78,13 +85,15 @@ export default {
   methods: {
     scoreRangeChange(data = {}) {
       const { datas = [{ a: 0, b: 100 }], tags = [0, 100] } = data
-      const arr = [0, 10, 11, 12, 13, 20, 22, 24, 50, 50, 50, 21, 54, 100]
+      // all考试成绩
+      const regionInfo = this.dataInfo.region_info
+      // echart 颜色
       const colors = ['#6F85CC', '#96C080', '#EAC370', '#D96685', '#B170CE']
       this.recordScoreRange = tags
       // 组装echart数据
       this.option.series[0].data = datas.reduce((prev, cur, index) => {
         let count = 0
-        arr.forEach(i => {
+        regionInfo.forEach(i => {
           if (i >= (i === 0 ? cur.a : cur.a + 1) && i <= cur.b) count++
         })
         prev.push({ value: count, name: `${cur.a}-${cur.b}`, itemStyle: colors[index] })

src/modules/teacher/data/exam/components/Submission.vue

@@ -8,22 +8,26 @@
     <el-row :gutter="20" class="row-bg" justify="space-around">
       <el-col :span="8">
         <div class="title">最早交卷</div>
-        <div><span class="num">100</span><span class="fen">分钟</span></div>
+        <div><span class="num">{{ dataInfo.submit_info.first }}</span><span class="fen">分钟</span></div>
       </el-col>
       <el-col :span="8">
         <div class="title">最迟交卷</div>
-        <div><span class="num">100</span><span class="fen">分钟</span></div>
+        <div><span class="num">{{ dataInfo.submit_info.last }}</span><span class="fen">分钟</span></div>
       </el-col>
       <el-col :span="8">
         <div class="title" style="white-space: nowrap">平均交卷时长</div>
-        <div><span class="num">100</span><span class="fen">分钟</span></div>
+        <div><span class="num">{{ dataInfo.submit_info.average }}</span><span class="fen">分钟</span></div>
       </el-col>
     </el-row>
   </el-card>
 </template>
 
 <script>
-export default {}
+export default {
+  props: {
+    dataInfo: { type: Object, default: () => ({}) }
+  }
+}
 </script>
 
 <style>

src/modules/teacher/data/exam/views/ExamData.vue

@@ -12,24 +12,27 @@
         <el-button type="text" style="margin-left: 30px">导出pdf</el-button>
       </el-col>
     </el-row>
-    <el-row :gutter="10" class="row-bg">
-      <el-col :span="8" class="col"><ExamInfo /></el-col>
-      <el-col :span="8" class="col"><Submission /></el-col>
-      <el-col :span="7"><Score /></el-col>
-    </el-row>
-    <el-row :gutter="10" class="row-bg">
-      <el-col :span="12" class="col"><ScoreRanking /></el-col>
-      <el-col :span="11"><TitleData /></el-col>
-    </el-row>
-    <el-row :gutter="10" class="row-bg">
-      <el-col :span="8" class="col"><Result /></el-col>
-      <el-col :span="8" class="col"><ScoreRange /></el-col>
-      <el-col :span="7"><QuestionType /></el-col>
-    </el-row>
+    <template v-if="Object.keys(dataInfo).length">
+      <el-row :gutter="10" class="row-bg">
+        <el-col :span="8" class="col"><exam-info :dataInfo="dataInfo" /></el-col>
+        <el-col :span="8" class="col"><submission :dataInfo="dataInfo" /></el-col>
+        <el-col :span="7"><score :dataInfo="dataInfo" /></el-col>
+      </el-row>
+      <el-row :gutter="10" class="row-bg">
+        <el-col :span="12" class="col"><ScoreRanking /></el-col>
+        <el-col :span="11"><TitleData /></el-col>
+      </el-row>
+      <el-row :gutter="10" class="row-bg">
+        <el-col :span="8" class="col"><result :dataInfo="dataInfo" /></el-col>
+        <el-col :span="8" class="col"><score-range :dataInfo="dataInfo" /></el-col>
+        <el-col :span="7"><question-type :dataInfo="dataInfo" /></el-col>
+      </el-row>
+    </template>
   </div>
 </template>
 
 <script>
+import { getExamDataInfo } from '../api'
 import ExamInfo from '../components/ExamInfo.vue'
 import Submission from '../components/Submission.vue'
 import Score from '../components/Score.vue'
@@ -64,13 +67,29 @@ export default {
           label: '北京烤鸭'
         }
       ],
-      value: ''
+      value: '',
+      dataInfo: {}
+    }
+  },
+  created() {
+    this.getExamDataInfo()
+  },
+  methods: {
+    getExamDataInfo() {
+      const params = {
+        course_id: this.$route.query.course_id,
+        examination_id: this.$route.query.examination_id,
+        type: 'examination'
+      }
+      getExamDataInfo(params).then(res => {
+        this.dataInfo = res.data
+      })
     }
   }
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .row-bg {
   margin-top: 30px;
   padding: 10px 0;

src/modules/teacher/data/exam/views/List.vue

@@ -83,7 +83,8 @@ export default {
       this.$router.push({
         path: '/teacher/data/exam/examData',
         query: {
-          row: row
+          course_id: row.course_id,
+          examination_id: row.examination_id
         }
       })
     },