TEAMModelOS/TEAMModelOS.TeachZone/ClientApp/view/reportadvanced.vue

<template>

  <div class="report_container">
    <Header></Header>
    <Master></Master>
    <div class="report_box bgf pad20" style="margin-top:40px;">
      <a href="/teachCheck" style="color: #288add;"> < 返回 </a>
      <div class="header_basic">
        <br />
        <ul>
          <li><span class="vice-name">考试名称：</span><span class="vice-name_content">2019.03.07-在线检测</span></li>
          <li><span class="vice-name">考试类型：</span><span class="vice-name_content">区级联考</span></li>
          <li><span class="vice-name">考试总分：</span><span class="vice-name_content">460</span></li>
          <li><span class="vice-name">学习稳定系数：</span><span class="vice-name_content">0.6</span></li>
        </ul>
      </div>
      <div class="chooseexam">
        <div class="exam">
          <span>选择考试：</span>
          <Select v-model="model1" style="width:200px">
            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </div>
        <div class="subjects">
          <span>科目：</span>
          <Select v-model="model2" style="width:200px">
            <Option v-for="itemc in cityList1" :value="itemc.value" :key="itemc.value">{{ itemc.label }}</Option>
          </Select>
        </div>
      </div>
      <div class="summarize">
        <p class="summarize_header_title">总结：</p>
        <div class="summarize_content">
          <p class="content_text">你在本次<span class="exam_color">2019.03.07-在线检测</span>中，班级平均分为：<span class="number_color1">433.7</span>,年级平均分为：<span class="number_color2">467</span>，考试范围为：1-4章节。</p>
          <p class="content_text">本班在 <span class="dot1">知识点1、知识点2、知识点3</span> 处的题目都表现出色，全部都答对了。</p>
          <p class="content_text">本班在 <span class="dot2">知识点3、知识点4、知识点6 </span> 处的题目有待加强，部分答对了，其中<span class="dot3">知识点3-XXXX，知识点4-XXXX，知识点6-XXX</span> 需加强练习或复习。</p>
          <p class="content_text">本班在<span class="dot4">知识点7、知识点8、知识点9 </span> 处的题目表现较差，都答错了。建议将答错试题请教老师，重新学习知识点内容，也可进入补救题库，进行补救。</p>
        </div>
      </div>
      <div class="trend">
        <p class="reportTit">成绩分析趋势</p>
        <div id="zhexian" style="width:100%; height:400px;"></div>
      </div>
      <div class="structure">
        <p class="reportTit">知识点分数占比</p>
        <div id="zhishidian" style="width:100%; height:400px;"></div>
      </div>
      <div class="structure_details">
        <p class="reportTit">知识点掌握情况</p>
        <Table :columns="columns1" :data="data1"></Table>
      </div>
      <div class="pie_box">
        <div id="pie" style="width:100%; height:400px;"></div>
      </div>
      <div class="student_details">
        <p class="reportTit">全班学生情况</p>
        <Table :columns="columns2" :data="data2"></Table>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
  import Header from '@/common/header.vue'
  import Master from '@/common/master.vue'
  import Footer from '@/common/footer.vue'
  export default {
    components: {
      Header,
      Master,
      Footer
    },
    data() {
      return {
        cityList: [
          {
            value: '2019.03.07-在线检测',
            label: '2019.03.07-在线检测'
          },
          {
            value: '2018.12.15-测试',
            label: '2018.12.15-测试'
          },
          {
            value: '2018.11.03-在线检测',
            label: '2018.11.03-在线检测'
          },
          {
            value: '2018.10.07-在线测试考',
            label: '2018.10.07-在线测试考'
          },
        ],
        model1: '2019.03.07-在线检测',
        cityList1: [
          {
            value: '语文',
            label: '语文'
          },
          {
            value: '数学',
            label: '数学'
          },
          {
            value: '英语',
            label: '英语'
          },
          {
            value: '物理',
            label: '物理'
          },
        ],
        model2: '数学',
        columns1: [
          {
            title: '知识点名称',
            key: 'name'
          },
          {
            title: '掌握情况',
            key: 'master'
          },
          {
            title: '难度系数',
            key: 'difficulty'
          },
          {
            title: '配分',
            key: 'score'
          },
          {
            title: '相关题目数',
            key: 'topic'
          },
          {
            title: '班级答对率',
            key: 'classaccuracy'
          },
          {
            title: '年级答对率',
            key: 'gradeaccuracy'
          },
        ],
        data1: [
          {
            name: '知识点1',
            master: '一般',
            difficulty: 0.6,
            score: 20,
            topic: '3/5',
            classaccuracy: '66%',
            gradeaccuracy:'67%',
            className: 'demo-table-info-column'
          },
          {
            name: '知识点2',
            master: '良好',
            difficulty: 0.4,
            score: 25,
            topic: '4/5',
            classaccuracy: '76%',
            gradeaccuracy: '72%',
          },
          {
            name: '知识点3',
            master: '差',
            difficulty: 0.5,
            score: 15,
            topic: '0/3',
            classaccuracy: '77%',
            gradeaccuracy: '79%',
          },
          {
            name: '知识点4',
            master: '差',
            difficulty: 0.7,
            score: 10,
            topic: '0/2',
            classaccuracy: '68%',
            gradeaccuracy: '48%',
          },
          {
            name: '知识点5',
            master: '优秀',
            difficulty: 0.6,
            score: 30,
            topic: '4/4',
            classaccuracy: '90%',
            gradeaccuracy: '95%',
          },
        ],
        columns2: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '学号',
            key: 'studennum'
          },
          {
            title: '排名',
            key: 'paiming'
          },
          {
            title: '分数',
            key: 'fenshu'
          },
          {
            title: '已超过班级百分比',
            key: 'chaoguo'
          },
        ],
        data2: [
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '1',
            fenshu: '98',
            chaoguo:'99%'
          },
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '2',
            fenshu: '96',
            chaoguo: '98%'
          },
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '3',
            fenshu: '95',
            chaoguo: '97%'
          },
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '4',
            fenshu: '92',
            chaoguo: '96%'
          },
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '5',
            fenshu: '90',
            chaoguo: '95%'
          },
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '6',
            fenshu: '90',
            chaoguo: '95.5%'
          },
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '7',
            fenshu: '86',
            chaoguo: '94%'
          },
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '8',
            fenshu: '85',
            chaoguo: '93%'
          },
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '9',
            fenshu: '83',
            chaoguo: '92%'
          },
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '10',
            fenshu: '81',
            chaoguo: '91%'
          },
          {
            name: '王小明',
            studennum: '2018001001',
            paiming: '11',
            fenshu: '79',
            chaoguo: '90%'
          },
        ],
      }
    },
    mounted() {
      this.drawLine();
      this.graph();
      this.pie();
    },
    methods: {
      drawLine() {
        let myChart = this.$echarts.init(document.getElementById('zhexian'));
        var xData = function () {
          var data = [];
          for (var i = 1; i < 15; i++) {
            data.push(i + "");
          }
          return data;
        }();
        myChart.setOption({
          backgroundColor: "#344b58",
          "tooltip": {
            "trigger": "axis",
            "axisPointer": {
              "type": "shadow",
              textStyle: {
                color: "#fff"
              }

            },
          },
          "grid": {
            "borderWidth": 0,
            "top": 100,
            "bottom": 35,
            "right":30,
            textStyle: {
              color: "#fff"
            }
          },
          "legend": {
            x: '4%',
            top: '11%',
            textStyle: {
              color: '#90979c',
            },
            "data": ['班级平均分','班级趋势',,'年级平均分']
          },
          "calculable": true,
          "xAxis": [{
            "type": "category",
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "splitLine": {
              "show": false
            },
            "axisTick": {
              "show": false
            },
            "splitArea": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "data": ["在线检测(2019.03.07)", "在线检测(2019.01.13)", "在线检测(2018.12.20)", "在线检测(2018.12.03)", "在线检测(2018.11.15)"],
          }],
          "yAxis": [{
            "type": "value",
            "splitLine": {
              "show": false
            },
            "axisLine": {
              lineStyle: {
                color: '#90979c'
              }
            },
            "axisTick": {
              "show": false
            },
            "axisLabel": {
              "interval": 0,

            },
            "splitArea": {
              "show": false
            },

          }],
          "series": [
            {
              "name": "班级平均分",
              "type": "bar",
              symbolSize: 5,
              barMaxWidth: 30,//最大宽度
              symbol: 'circle',
              "itemStyle": {
                "normal": {
                  "color": "rgba(127,255,212,1)",
                  "barBorderRadius": 0,
                  "label": {
                    "show": true,
                    "position": "top",
                    formatter: function (p) {
                      return p.value > 0 ? (p.value) : '';
                    }
                  }
                }
              },
              "data": [80, 82, 86, 80, 78, 83],
            },
            {
            "name": "班级趋势",
            "type": "line",
            "stack": "总量",
            "barMaxWidth": 5,
            "barGap": "10%",
            "itemStyle": {
              "normal": {
                "color": "rgba(255,144,128,1)",
                "label": {
                  "show": true,
                  "textStyle": {
                    "color": "#fff"
                  },
                  "position": "insideTop",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            "data": [76,83,93,90,68,83],
          },
            {
              "name": "年级平均分",
              "type": "line",
              symbolSize: 10,
              symbol: 'circle',
              "itemStyle": {
                "normal": {
                  "color": "rgba(30,144,255,1)",
                  "barBorderRadius": 0,
                  "label": {
                    "show": true,
                    "position": "top",
                    formatter: function (p) {
                      return p.value > 0 ? (p.value) : '';
                    }
                  }
                }
              },
              "data": [76, 72, 76, 80, 79, 77],
            },
          ]
        })
     },
      graph() {
        let myCharts = this.$echarts.init(document.getElementById('zhishidian'));
        myCharts.setOption({
          backgroundColor: "#344b58",
          title: {
            text: '知识点分数占比',
            left: 'center',
            top: 20,
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
          },

          visualMap: {
            show: false,
            min: 0,
            max: 100,
            inRange: {
              //colorLightness: [0, 1]
            }
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '70%',
            center: ['50%', '50%'],
            color: ['rgb(131,249,103)', '#FBFE27', '#FE5050', '#1DB7E5'], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: [{
              value: 15,
              name: '知识点1'
            },
            {
              value: 20,
              name: '知识点2'
            },
            {
              value: 30,
              name: '知识点3'
            },
            {
              value: 35,
              name: '知识点4'
            }
            ].sort(function (a, b) {
              return a.value - b.value
            }),
            roseType: 'radius',
            label: {
              normal: {
                formatter: ['{c|{c}分}', '{b|{b}}'].join('\n'),
                rich: {
                  c: {
                    color: '#fff',
                    fontSize: 20,
                    fontWeight: 'bold',
                    lineHeight: 5
                  },
                  b: {
                    color: 'rgb(98,137,169)',
                    fontSize: 15,
                    height: 40
                  },
                },
              }
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: 'rgb(98,137,169)',
                },
                smooth: 0.2,
                length: 10,
                length2: 20,

              }
            },
            itemStyle: {
              normal: {
                shadowColor: 'rgba(0, 0, 0, 0.8)',
                shadowBlur: 50,
              }
            }
          }]
        })
      },
      pie() {
        let myChartc = this.$echarts.init(document.getElementById('pie'));
        myChartc.setOption({
          backgroundColor: "#344b58",
          title: {
            text: '雷达图'
          },
          tooltip: {},
          legend: {
            top: 20,
            itemWidth: 12,
            itemHeight: 12,
            textStyle: {
              color: '#fff'
            }
          },
          radar: {
            radius: '60%',
            splitNumber: 8,
            axisLine: {
              lineStyle: {
                color: '#fff',
                opacity: .2
              }
            },
            splitLine: {
              lineStyle: {
                color: '#fff',
                opacity: .2
              }
            },
            splitArea: {
              areaStyle: {
                color: 'rgba(127,95,132,.3)',
                opacity: 1,
                shadowBlur: 45,
                shadowColor: 'rgba(0,0,0,.5)',
                shadowOffsetX: 0,
                shadowOffsetY: 15,
              }
            },
            indicator: [{
              name: '选择题',
              max: 100
            }, {
              name: '填空题',
              max: 100
            }, {
              name: '文言文',
              max: 100
            }, {
              name: '阅读理解',
              max: 100
            }, {
              name: '古诗词',
              max: 100
            }, {
              name: '作文',
              max: 100
            }]
          },
          series: [{
            name: '',
            type: 'radar',
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: 'rgba(0,0,0,.2)',
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1
              }
            },
            data: [{
              value: [70, 80, 65, 70, 60, 85],
              name: '',
            },]
          }],
          color: ['#ef4b4c', '#b1eadb'],
          backgroundColor: {
            type: 'radial',
            x: 0.4,
            y: 0.4,
            r: 0.35,
            colorStops: [{
              offset: 0,
              color: '#895355' // 0% 处的颜色
            }, {
              offset: .4,
              color: '#593640' // 100% 处的颜色
            }, {
              offset: 1,
              color: '#39273d' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
          }
        })
      },
      rowClassName(row, index) {
        if (index === 1) {
          return 'demo-table-info-row';
        } else if (index === 3) {
          return 'demo-table-error-row';
        }
        return '';
      }
    }
  }
</script>
<style>
 .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
    border: 1px solid #d3d3d3 !important;
    border-radius: 7px;
  }
  .ivu-table .demo-table-info-row td {
    background-color: #2db7f5;
    color: #fff;
  }

  .ivu-table .demo-table-error-row td {
    background-color: #ff6600;
    color: #fff;
  }

  .ivu-table td.demo-table-info-column {
    background-color: #2db7f5;
    color: #fff;
  }

  .ivu-table .demo-table-info-cell-name {
    background-color: #2db7f5;
    color: #fff;
  }

  .ivu-table .demo-table-info-cell-age {
    background-color: #ff6600;
    color: #fff;
  }

  .ivu-table .demo-table-info-cell-address {
    background-color: #187;
    color: #fff;
  }
</style>
<style scoped>
  .report_container {
    width:100%;
    height:auto;
  }
  .report_box {
    width:1200px;
    height:auto;
    margin:0 auto;
  }
  .header_basic {
    width:100%;
    text-align:center;
    border-bottom:1px solid #ddd;
    margin-top:5px;
    padding:10px 0 20px
  }
    .header_basic ul {
      display:inline-block;
      margin-top:20px;
    }
      .header_basic ul li {
        padding:3px 4px 2px 4px;
        margin:0 15px;
      }
        .header_basic ul li i {
          float: left;
          margin-top: 4px;
        }
  .name {
    font-size: 18px;

  }
  .name_content {
    font-size: 20px;
  }
  .vice-name, .vice-name_content {
    font-size: 15px;color: #666;
  }
  .chooseexam {
    width:100%;
    height:auto;
    margin:60px 0 40px;
  }
  .exam {
    width:25%;
    float:left;
    padding-left:1%;
    margin-right: 30px;

  }
  .summarize {
    width: 96%;
    margin: 2%;
    /*border:1px solid #d3d3d3;*/
    background: #f5f5f5;

    padding:15px 20px 30px;
    border-radius:5px;
  }
  .summarize_header_title {
    font-size:22px;
    padding-top:10px;
  }
  .summarize_content {
    width:1000px;
    height:auto;
    margin:0 auto;
  }
    .summarize_content p {
     margin:10px 0;
    }
    .content_header {
      font-size: 16px;
    }
  .content_text {
    font-size: 14px;
  }
    .content_text span {
      font-size:16px;
    }
  .exam_color, .dot1 {
    color: #FF6633;
  }
  .number_color, .dot4 {
    color: #FF3366;
  }
  .number_color1 {
    color: #4876FF
  }
  .number_color2 {
    color: #76EE00
  }
  .dot2 {
    color: #0099CC;
  }
  .dot3 {
    color: #0000CC;
  }
  .trend, .structure {
    width: 100%;
    height: auto;
    padding: 1.5%;
  }
    .reportTit{
      font-size: 16px;
      font-weight: bold;
      margin:20px 0 10px;
    }
  .structure_details {
    width:100%;
    padding:1%;
    margin:20px 0;

  }

</style>