孙向锦 / SunvoteEducation

<template>
  <div>
    <Dec :content="content" />
    <div class="classes">
      <div class="search">
        <span>选择班级：</span>
        <el-select v-model="grade" size="small" placeholder="请选择">
          <el-option
            v-for="item in gradeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="classes" size="small" placeholder="请选择">
          <el-option
            v-for="item in classesList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" size="small">统计</el-button>
        <el-button type="warning" size="small">清空</el-button>
      </div>
      <div class="classinfo">
        <div class="box-l">
          <p class="ccc">班级名称</p>
          <p>一年三班</p>
        </div>
        <div class="box-r">
          <el-row>
            <el-col :span="6"><span class="ccc">班级编号：</span>2234</el-col>
            <el-col :span="6"><span class="ccc">班级人数：</span>55人</el-col>
            <el-col :span="6"><span class="ccc">当前年级：</span>小学一年级</el-col>
            <el-col :span="6"><span class="ccc">累计考试次数：</span>21次</el-col>
          </el-row>
        </div>
        <p class="state">状态：在读中</p>
      </div>
      <div class="subjectbox">
        <div class="titlebox">
          <div class="title">科目趋势</div><div class="sjx" />
          <el-select v-model="subject" size="small" placeholder="请选择">
            <el-option
              v-for="item in subjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <span class="ccc">按科目历史考试的正确率排序</span>
        </div>
        <div class="content">
          <div id="myChart" :style="{width: '100%', height: '300px'}" />
        </div>
      </div>

      <div class="rankbox">
        <div class="titlebox">
          <div class="title">成绩排名</div><div class="sjx" />
          <el-select v-model="ssubject" size="small" style="float:right;margin-top:8px;margin-right:20px;" placeholder="请选择">
            <el-option
              v-for="item in ssubjectList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="content">
          <el-table
            :data="scoreData"
            height="450"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              label="姓名"
            />
            <el-table-column
              prop="rightbl"
              label="正确率"
            />
            <el-table-column
              prop="rank"
              label="班级排名"
            />
          </el-table>
        </div>
      </div>
      <div class="historybox">
        <div class="titlebox">
          <div class="title">往期考试</div><div class="sjx" />
          <el-link href="#" style="line-height:40px;float:right;margin-right:20px;">更多>></el-link>
        </div>
        <div class="content">
          <el-table
            :data="historyData"
            style="width: 100%"
          >
            <el-table-column
              prop="name"
              width="260"
              :show-overflow-tooltip="true"
              label="试卷名"
            />
            <el-table-column
              prop="youbl"
              label="优秀率"
            />
            <el-table-column
              prop="bujigebl"
              label="不及格率"
            />
            <el-table-column
              prop="lostbl"
              label="缺考率"
            />
          </el-table>
        </div>
      </div>
      <div class="lostbox">
        <div class="titlebox">
          <div class="title">缺考排行</div><div class="sjx" />
          TOP3
        </div>
        <div class="content">
          <div v-for="(value,index) in lostData" :key="index" class="lostlist">
            <div class="round">{{ value.num }}次</div>
            <p>{{ value.name }}</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
import Dec from '@/components/Dec'
export default {
  name: 'Classes',
  components: {
    Dec
  },

  data() {
    return {
      content: '',
      grade: '',
      classes: '',
      subject: '',
      ssubject: '',
      gradeList: [
        {
          label: '小学一年级',
          value: '1'
        },
        {
          label: '小学二年级',
          value: '2'
        }
      ],
      classesList: [
        {
          label: '一班',
          value: '1'
        },
        {
          label: '二班',
          value: '2'
        }
      ],
      subjectList: [
        {
          label: '数学',
          value: '1'
        }
      ],
      ssubjectList: [
        {
          label: '数学',
          value: '1'
        }
      ],
      scoreData: [
        {
          name: '张三',
          rightbl: '99%',
          rank: '1'
        }
      ],
      historyData: [
        {
          name: '【第六章-经济学人】测验试卷一',
          youbl: '34%',
          bujigebl: '9%',
          lostbl: '1%'
        }
      ],
      lostData: [
        {
          name: '小鬼',
          num: '8'
        },
        {
          name: '李荣浩',
          num: '5'
        },
        {
          name: '杨千嬅',
          num: '3'
        }
      ]
    }
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLabel: {
            rotate: 60
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      })
    }
  }
}
</script>
<style scoped>
.classes{
    max-width: 1700px;
    min-width: 1100px;
    height:calc(100vh - 115px);
    margin:0 auto;
    background: #fff;
    margin-top:15px;
    padding:20px;
    overflow: auto
}
.sjx{
    display: inline-block;
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left: 20px solid #000;
    vertical-align: middle;
}
.title{
    width:200px;
    height:40px;
    background: #000;
    display: inline-block;
    vertical-align: middle;
    color:#fff;
    line-height: 40px;
    text-align: center
}
.classinfo{
    border:1px solid #888;
    border-radius: 20px;
    padding:20px;
    overflow: hidden;
    font-size:14px;
    margin-top: 10px;
    position: relative;
}
.ccc{
    color:#888
}
.box-l{
    width:15%;
    text-align: center;
    border-right:1px solid #ccc;
    float:left
}
.box-r{
    width:80%;
    margin-left:5%;
    float: left;
    line-height:74px;
}
.state{
    position: absolute;
    top:0px;
    right:20px;
}
.subjectbox{
    border:1px solid #888;
    margin-top:10px;
    height:400px;
    border-radius: 0 10px 10px 10px;
}
.rankbox{
    width:calc(50% - 5px);
    height:510px;
    margin-top:10px;
    border:1px solid #888;
    border-radius: 0 10px 10px 10px;
    float: left;
}
.rankbox .content{
    margin-top:10px;
}
.historybox{
    width:calc(50% - 5px);
    height:300px;
    float: left;
    margin-left:10px;
    margin-top:10px;
    border:1px solid #888;
    border-radius: 0 10px 10px 10px;
}
.lostbox{
    width:calc(50% - 5px);
    height:200px;
    float: left;
    margin-left:10px;
    margin-top:10px;
    border:1px solid #888;
    border-radius: 0 10px 10px 10px;
}
.lostlist{
    float: left;
    width:30%;
    margin-top:30px;
    text-align: center
}
.lostlist .round{
    width:60px;
    height:60px;
    line-height: 60px;
    text-align: center;
    display: inline-block;
    border-radius: 30px;
    border:1px solid #ff8d00;
    color:#ff8d00
}
.lostlist p{
    color:#ff8d00;
    margin: 0;
    line-height: 30px;
}
</style>