testinfo.vue 8.82 KB

Edit Raw Blame History

<template>
  <div>
    <Dec :content="content" />
    <div class="aswinfo">
      <div class="testtitle">
        <p><span class="bold">试卷编码：</span>0003</p>
        <p><span class="bold">试卷名称：</span>【第六章-经济学人】测试试卷（中）</p>
        <el-button type="primary" size="small">导出成绩单</el-button>
      </div>
      <div class="testinfo">
        <p class="bold">2020年小学一年级开学考试</p>
        <div class="infobox">
          <el-row>
            <el-col :span="2">
              <p>考场</p>
              <p class="bold big">001</p>
            </el-col>
            <el-col :span="7" style="border-right:1px solid #ccc">
              <p><i class="el-icon-document" /> 卷面分：100分</p>
              <p><i class="el-ump-shijian" /> 考试时长：30分钟</p>
              <p><i class="el-ump-shijian" /> 开始考试时间：2019-12-25 10:00</p>
            </el-col>
            <el-col :span="15" style="padding-left:20px">
              <div class="scoreinfo">
                <Info v-for="(item,index) in scoredata" :key="index" :icon="item.icon" :label="item.label" :value="item.value" />
              </div>
              <div class="paperinfo">
                <Info v-for="(item,index) in paperdata" :key="index" :icon="item.icon" :label="item.label" :value="item.value" />
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="piebox">
        <div id="myChart" :style="{width: '100%', height: '500px'}" />
      </div>
      <div class="rankbox">
        <div class="title">排行榜</div>
        <el-table
          :data="rankData"
          height="430"
          style="width: 100%"
        >
          <el-table-column
            prop="rank"
            label="排名"
          />
          <el-table-column
            prop="name"
            label="学生名称"
          />
          <el-table-column
            prop="rightbl"
            label="正确率"
          />
          <el-table-column
            prop="score"
            label="得分"
          />
        </el-table>
      </div>
      <div style="clear:both" />
      <div class="errorbox">
        <div class="title">
          <p class="bold" style="float:left;">易错题分析</p>
          <p style="float:right">正确率从低到高排序 <i class="el-icon-caret-bottom" /></p>
          <div style="clear:both" />
        </div>
        <div class="listbox">
          <div class="list">
            <el-row>
              <el-col :span="4">
                <p class="bold">第1题</p>
                <p>单选题</p>
              </el-col>
              <el-col :span="16">
                <div class="asw">
                  <p style="float:left"><i class="el-ump-icon-3" />易错项：AB</p>
                  <p style="float:left;margin-left:40px;"><i class="el-ump-icon-5" />正确答案：ABCDEFGHI</p>
                  <div style="clear:both" />
                </div>
                <div class="rightbl">
                  <i class="el-ump-icon-6" />
                  <span>正确率</span>
                  <Rightbl />
                </div>
                <Aswdetail :data="data" class="detailbox" />
              </el-col>
              <el-col :span="4" style="line-height:70px;">
                <span>展开详情</span>
                <i class="el-icon-caret-bottom" />
              </el-col>
            </el-row>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import Dec from '@/components/Dec'
import Aswdetail from './components/aswdetail'
import Info from './components/info'
import Rightbl from './components/rightbl'
export default {
  name: 'Aswinfo',
  components: {
    Dec,
    Aswdetail,
    Info,
    Rightbl
  },
  data() {
    return {
      content: '',
      data: [
        {
          answer: 'A',
          num: '33',
          total: '60',
          right: 1
        },
        {
          answer: 'BCDEFGHIJKL',
          num: '12',
          total: '60',
          right: 0
        },
        {
          answer: 'C',
          num: '5',
          total: '60',
          right: 0
        },
        {
          answer: 'D',
          num: '5',
          total: '60',
          right: 0
        },
        {
          answer: '未提交',
          num: '5',
          total: '60',
          right: -1
        }
      ],
      scoredata: [
        {
          icon: 'el-ump-icon-4',
          label: '最高分',
          value: '99分'
        },
        {
          icon: 'el-ump-icon-',
          label: '最低分',
          value: '34分'
        },
        {
          icon: 'el-ump-icon-1',
          label: '平均分',
          value: '76分'
        }
      ],
      paperdata: [
        {
          icon: 'el-ump-icon-2',
          label: '应到人数',
          value: '55人'
        },
        {
          icon: 'el-ump-icon-2',
          label: '及格人数',
          value: '43人'
        },
        {
          icon: 'el-ump-icon-2',
          label: '不及格人数',
          value: '7人'
        },
        {
          icon: 'el-ump-icon-2',
          label: '缺考人数',
          value: '5人'
        }
      ],
      rankData: [
        {
          rank: '1',
          name: '张三',
          rightbl: '98%',
          score: '98'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        },
        {
          rank: '2',
          name: '张三',
          rightbl: '96%',
          score: '96'
        }
      ]
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '某站点用户访问来源',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
.aswinfo{
    max-width: 1100px;
    height:calc(100vh - 115px);
    overflow: auto;
    margin:0 auto;
    background: #fff;
    margin-top:15px;
    padding:20px;
}
.infobox{
  font-size: 14px;
}
.big{
  font-size: 20px;
}
.bold{
  font-weight:bold
}
.testtitle{
  overflow: hidden;
  padding:10px 0;
}
.testtitle p{
  float: left;
}
.testtitle p:first-child{
  margin-right:20px;
}
.testtitle .el-button{
  float: right
}
.testinfo{
  border:1px solid #ccc;
  border-radius: 20px;
  padding:20px;
}
.scoreinfo .info,.paperinfo .info{
  width:110px;
  margin-right:15px;
}
.piebox{
  width:calc(60% - 5px);
  padding:5px;
  float: left;
  border:1px solid #ccc;
  border-radius: 20px;
  margin-top:10px;
}
.rankbox{
  width:calc(40% - 5px);
  height:512px;
  padding:5px;
  float: left;
  border:1px solid #ccc;
  border-radius:20px;
  margin-top:10px;
  margin-left:5px;
}
.rankbox .title{
  line-height: 60px;
  text-align: center;
}
.errorbox{
  border:1px solid #eee;
  border-radius: 20px;
  padding:10px 20px;
  margin-top:10px;
  background: #eee;
}
.listbox .list{
  background: #fff;
  border-radius: 15px;
  padding:10px 15px;
}
.detailbox{
  margin-top:30px;
}
</style>