TEAMModelOS/TEAMModelOS.TeachZone/ClientApp/view/report.vue

<template>

  <div class="report_container">
    <Header></Header>
    <Master></Master>

    <div class="report_box bgf pad20" style="margin-top:40px;">
      <a href="/teachCheckList" style="color: #288add;"> < 返回 </a>
      <div class="header_basic">
        <ul>
          <li><!--<Icon type="md-person" size="24" />--><span class="name">姓名：</span><span class="name_content">张三</span></li>
          <li><!--<Icon type="md-bookmarks" size="24" />--><span class="name">学号：</span><span class="name_content">201901001</span></li>
          <li><!--<Icon type="ios-clipboard" size="24" />--><span class="name">班级：</span><span class="name_content">2019级五班</span></li>
        </ul>
        <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_header">张三同学，你好！</p>
          <p class="content_text">你在本次<span class="exam_color">在线检测（2019-03-07）</span>中，考试总分为<span class="number_color">460分</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>
    <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: 'accuracy'
          },
        ],
        data1: [
          {
            name: '知识点1',
            master: '一般',
            difficulty: 0.6,
            score: 20,
            topic: '3/5',
            accuracy: '60%',
            className: 'demo-table-info-column'
          },
          {
            name: '知识点2',
            master: '良好',
            difficulty: 0.4,
            score: 25,
            topic: '4/5',
            accuracy: '80%'
          },
          {
            name: '知识点3',
            master: '差',
            difficulty: 0.5,
            score: 15,
            topic: '0/3',
            accuracy: '0%'
          },
          {
            name: '知识点4',
            master: '差',
            difficulty: 0.7,
            score: 10,
            topic: '0/2',
            accuracy: '0%'
          },
          {
            name: '知识点5',
            master: '优秀',
            difficulty: 0.6,
            score: 30,
            topic: '4/4',
            accuracy: '100%'
          },
        ]
      }
    },
    mounted() {
      this.drawLine();
      this.graph();
    },
    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",
            "stack": "总量",
            "barMaxWidth": 35,
            "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",
            "stack": "总量",
            symbolSize: 20,
            symbol: 'circle',
            "itemStyle": {
              "normal": {
                "color": "rgba(252,230,48,1)",
                "barBorderRadius": 0,
                "label": {
                  "show": true,
                  "position": "top",
                  formatter: function (p) {
                    return p.value > 0 ? (p.value) : '';
                  }
                }
              }
            },
            "data": [76, 83, 93, 90, 68, 83],
          },
          ]
        })
     },
      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,
              }
            }
          }]
        })
      },
      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;
  }
  .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>