classReportPDF/js/section_3.js

$(function () {
  function hexToRgba(hex, opacity) {
    var rgbaColor = "";
    var reg = /^#[\da-f]{6}$/i;
    if (reg.test(hex)) {
      rgbaColor =
        "rgba(" +
        parseInt("0x" + hex.slice(1, 3)) +
        "," +
        parseInt("0x" + hex.slice(3, 5)) +
        "," +
        parseInt("0x" + hex.slice(5, 7)) +
        "," +
        opacity +
        ")";
    }
    return rgbaColor;
  }
  function initlargeAnalysisEcharts(s_index, list) {
    var schoolscore = [],
      classscore = [],
      legendlist = [currentclass, "全年级"];
    $.each(list, function (idx, item) {
      if (item.subjectname != "全科") {
        classscore.push(item.classavgscore);
        schoolscore.push(item.gradeavgscore);
      }
    });
    // 求出数组最大值
    let arr = [...schoolscore, ...classscore];
    let arr1 = Math.max.apply(null, arr);
    let maxnum = parseInt((arr1 + 10) / 10) * 10;
    let arrList = [];
    $.each(list, function (idx, item) {
      if (item.subjectname != "全科") {
        let j = {
          name: item.qtypename,
          max: maxnum
        };
        arrList.push(j);
      }
    });
    var option = {
      animation: false,
      color: ["#5C99FF", "#5EC5C8"],
      legend: {
        icon: "rectRound",
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        data: legendlist,
        x: "center",
        y: "bottom"
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true
      },
      radar: {
        radius: "60%",
        center: ["50%", "50%"],
        indicator: arrList
      },
      series: {
        type: "radar",
        tooltip: {
          trigger: "item"
        },
        // areaStyle: {},  //内部阴影
        data: [
          {
            value: classscore,
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            },
            name: currentclass
          },
          {
            value: schoolscore,
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            },
            name: "全年级"
          }
        ]
      }
    };
    var myEcharts = echarts.init(
      $(".section_3_" + s_index + " #largeAnalysisEcharts")[0]
    );
    myEcharts.clear();
    myEcharts.setOption(option);
    showlargeAnalysistable(list, legendlist, s_index);
  }

  function showlargeAnalysistable(list, legendlist, s_index) {
    var table = "",
      goodTableHeadTr1Html =
        '<th rowspan="2">题型</th><th rowspan="2">对应题号</th><th rowspan="2">分值</th><th rowspan="2">占比</th><th colspan="2">年级</th><th colspan="2">' +
        currentclass +
        "</th>",
      goodTableHeadTr2Html = "",
      trHtml = "";
    var data = {
        0: ""
      },
      page = 0;
    var pointnum = s_index == 0 ? 11 : 16; //第一次是半页 显示十条 往后二十条每页
    $.each(list, function (idx, item) {
      if ((idx + 1) % pointnum == 0) {
        page++;
        if (page == 1) {
          pointnum = 31;
        }
        data[page] = "";
      }
      data[page] += "<tr>";
      data[page] +=
        '<td><div class="my_cell">' +
        item.qtypename +
        '</div></td><td><div class="my_cell">' +
        item.qns +
        '</div></td><td><div class="my_cell">' +
        item.score +
        '</div></td><td><div class="my_cell">' +
        item.srate +
        '%</div></td><td><div class="my_cell">' +
        item.gradeavgscore +
        '</div></td><td><div class="my_cell">' +
        item.gradesrate +
        '%</div></td><td><div class="my_cell">' +
        item.classavgscore +
        '</div></td><td><div class="my_cell">' +
        item.classsrate +
        "%" +
        "</div></td>";
    });
    $.each(legendlist, function (idx, item) {
      goodTableHeadTr2Html += "<th>平均分</th><th>得分率</th>";
    });

    table =
      '  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
      goodTableHeadTr1Html +
      '</tr><tr class="goodTableHeadTr2">' +
      goodTableHeadTr2Html +
      '</tr></thead><tbody class="goodTableTbody">' +
      trHtml +
      "</tbody></table>";
    for (var i = 0; i <= page; i++) {
      table =
        '<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
        goodTableHeadTr1Html +
        '</tr><tr class="goodTableHeadTr2">' +
        goodTableHeadTr2Html +
        '</tr></thead><tbody class="goodTableTbody">' +
        data[i] +
        "</tbody></table>";
      $(".section_3_" + s_index + ".large_" + i + " .largeAnalysistable").html(
        table
      );
      if (i != 0) {
        //添加分页
        $(".large_" + (i - 1) + ".section_3_" + s_index).after(
          '<div class="page_root section_3_' +
            s_index +
            " large_" +
            i +
            '"></div>'
        );
        $(".page_root.section_3_" + s_index + ".large_" + i).html(table);
      }
    }
    // $(".section_3_"+s_index +" .largeAnalysistable").html(table)
  }

  function initSmallAnalysisEcharts(s_index, list) {
    let legendlist = [currentclass, "全年级"],
      xAxis_data = [],
      schoolscore = [],
      classscore = [],
      curseries = [];
    $.each(list, function (idx, item) {
      xAxis_data.push("第" + item.qn + "题");
      classscore.push(item.classavgscore);
      schoolscore.push(item.gradeavgscore);
    });
    let color = ["#5699FF", "#5EC5C8"];
    curseries = [
      {
        name: currentclass,
        type: "line",
        symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
        smooth: false, //折线是否弯曲
        // symbol: "emptyCircle",
        symbolSize: 6,
        itemStyle: {
          normal: {
            color: "#4190FF" // 拐点外圈颜色
          }
        },
        label: {
          normal: {
            show: true,
            align: "center",
            verticalAlign: "bottom",
            position: "top",
            distance: 0,
            formatter: `{c}`
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[0], 0.3)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[0], 0)
                }
              ],
              false
            ),
            shadowColor: hexToRgba(color[0], 0),
            shadowBlur: 10
          }
        },
        data: classscore
      },
      {
        name: "全年级",
        type: "line",
        // smooth: true, //是否平滑曲线显示
        symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
        smooth: false, //折线是否弯曲
        // symbol: "emptyCircle",
        symbolSize: 6,
        // zlevel: 3,
        itemStyle: {
          normal: {
            color: "#5FCE9E" // 拐点外圈颜色
          }
        },
        label: {
          normal: {
            show: true,
            align: "center",
            verticalAlign: "bottom",
            position: "top",
            distance: 0,
            formatter: `{c}`
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: hexToRgba(color[1], 0.3)
                },
                {
                  offset: 1,
                  color: hexToRgba(color[1], 0)
                }
              ],
              false
            ),
            shadowColor: hexToRgba(color[1], 0),
            shadowBlur: 10
          }
        },
        data: schoolscore
      }
    ];
    let option = {
      animation: false,
      color: ["#5699FF", "#5EC5C8"],
      title: {
        text: "分",
        x: "left",
        y: "top",
        textStyle: {
          color: "#5F6E82",
          fontSize: 12,
          fontWeight: 500
        }
      },
      legend: {
        icon: "rectRound",
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        data: legendlist,
        x: "center",
        y: "bottom"
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true
      },
      xAxis: [
        {
          type: "category",
          data: xAxis_data,
          axisLabel: {
            color: "#5F6E82" //更改坐标轴文字颜色
          },
          axisTick: {
            alignWithLabel: true
          },
          boundaryGap: true,
          triggerEvent: true,
          axisLine: {
            show: true, //是否显示轴线
            lineStyle: {
              color: "#DADADA" //刻度线的颜色
            }
          }
        }
      ],
      yAxis: [
        {
          type: "value",
          axisTick: {
            show: false //刻度
          },
          axisLine: {
            show: false, //是否显示轴线
            lineStyle: {
              color: "#DADADA" //刻度线的颜色
            }
          },
          splitLine: {
            //网格线
            lineStyle: {
              type: "dotted" //设置网格线类型 dotted：虚线   solid:实线
            },
            show: true //隐藏或显示
          },
          axisLabel: {
            color: "#5F6E82" //更改坐标轴文字颜色
          }
        }
      ],
      series: curseries
    };
    var myEcharts = echarts.init(
      $(".section_3_" + s_index + " #SmallAnalysisEcharts")[0]
    );
    myEcharts.clear();
    myEcharts.setOption(option);
    showSmallSmallAnalysistable(list, legendlist, s_index);
  }

  function showSmallSmallAnalysistable(list, legendlist, s_index) {
    var table = "",
      goodTableHeadTr1Html =
        '<th rowspan="2">题号</th><th rowspan="2">题型</th><th rowspan="2">分值</th><th rowspan="2">难度</th><th colspan="2">年级</th><th colspan="2">' +
        currentclass +
        "</th>",
      goodTableHeadTr2Html = "",
      trHtml = "";
    var complexityarr = ["一", "二", "三", "四", "五"];
    $.each(list, function (idx, item) {
      var complexity = item.complexity
        ? complexityarr[item.complexity - 1] + "星"
        : " ";
      trHtml += "<tr>";
      trHtml +=
        '<td><div class="my_cell">' +
        item.qn +
        '</div></td><td><div class="my_cell">' +
        item.qtypename +
        '</div></td><td><div class="my_cell">' +
        item.score +
        '</div></td><td><div class="my_cell">' +
        complexity +
        '</div></td><td><div class="my_cell">' +
        item.gradeavgscore +
        '</div></td><td><div class="my_cell">' +
        item.gradesrate +
        '%</div></td><td><div class="my_cell">' +
        item.classavgscore +
        '</div></td><td><div class="my_cell">' +
        item.classsrate +
        "%" +
        "</div></td>";
    });
    $.each(legendlist, function (idx, item) {
      goodTableHeadTr2Html += "<th>平均分</th><th>得分率</th>";
    });
    table =
      '  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
      goodTableHeadTr1Html +
      '</tr><tr class="goodTableHeadTr2">' +
      goodTableHeadTr2Html +
      '</tr></thead><tbody class="goodTableTbody">' +
      trHtml +
      "</tbody></table>";
    $(".section_3_" + s_index + " .SmallAnalysistable").html(table);
  }

  function initpointsAnalysisEcharts(s_index, list) {
    if (list.length == 0) return;
    var schoolscore = [],
      classscore = [],
      legendlist = [currentclass + "得分率", "年级得分率"];
    $.each(list, function (idx, item) {
      if (item.subjectname != "全科") {
        classscore.push(item.classsrate);
        schoolscore.push(item.gradesrate);
      }
    });
    // 求出数组最大值
    let arr = [...schoolscore, ...classscore];
    let arr1 = Math.max.apply(null, arr);
    let maxnum = parseInt((arr1 + 10) / 10) * 10;
    let arrList = [];
    $.each(list, function (idx, item) {
      if (item.subjectname != "全科") {
        let j = {
          name: item.pointname,
          max: maxnum
        };
        arrList.push(j);
      }
    });
    var option = {
      animation: false,
      color: ["#5C99FF", "#FF5F56"],
      legend: {
        icon: "rectRound",
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        data: legendlist,
        x: "center",
        y: "bottom"
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true
      },
      radar: {
        radius: "60%",
        center: ["50%", "55%"],
        indicator: arrList
      },
      series: {
        type: "radar",
        tooltip: {
          trigger: "item"
        },
        // areaStyle: {},  //内部阴影
        data: [
          {
            value: classscore,
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            },
            name: currentclass + "得分率"
          },
          {
            value: schoolscore,
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
              }
            },
            name: "年级得分率"
          }
        ]
      }
    };
    var myEcharts = echarts.init(
      $(".section_3_" + s_index + " #pointsAnalysisEcharts")[0]
    );
    myEcharts.clear();
    myEcharts.setOption(option);
    showpointsAnalysistable(list, legendlist, s_index);
  }

  function showpointsAnalysistable(list, legendlist, s_index) {
    var table = "",
      goodTableHeadTr1Html =
        '<th rowspan="2" class="points">知识点</th><th rowspan="2">对应题号</th><th rowspan="2">分值</th><th rowspan="2">占比</th><th colspan="2">年级</th><th colspan="2">' +
        currentclass +
        "</th>",
      goodTableHeadTr2Html = "",
      trHtml = "";
    var data = {
        0: ""
      },
      page = 0;
    var pointnum = 16; //第一次是半页 显示十条 往后二十条每页
    $.each(list, function (idx, item) {
      if ((idx + 1) % pointnum == 0) {
        page++;
        if (page == 1) {
          pointnum = 31;
        }
        data[page] = "";
      }
      data[page] += "<tr>";
      data[page] +=
        '<td><div class="my_cell">' +
        item.pointname +
        '</div></td><td><div class="my_cell">' +
        item.qns +
        '</div></td><td><div class="my_cell">' +
        item.score +
        '</div></td><td><div class="my_cell">' +
        item.srate +
        '%</div></td><td><div class="my_cell">' +
        item.gradeavgscore +
        '</div></td><td><div class="my_cell">' +
        item.gradesrate +
        '%</div></td><td><div class="my_cell">' +
        item.classavgscore +
        '</div></td><td><div class="my_cell">' +
        item.classsrate +
        "%" +
        "</div></td>";
    });
    $.each(legendlist, function (idx, item) {
      goodTableHeadTr2Html += "<th>平均分</th><th>得分率</th>";
    });
    for (var i = 0; i <= page; i++) {
      table =
        '<table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
        goodTableHeadTr1Html +
        '</tr><tr class="goodTableHeadTr2">' +
        goodTableHeadTr2Html +
        '</tr></thead><tbody class="goodTableTbody">' +
        data[i] +
        "</tbody></table>";
      $(".section_3_" + s_index + ".page_" + i + " .pointsAnalysistable").html(
        table
      );
      if (i != 0) {
        //添加分页
        $(".page_" + (i - 1) + ".section_3_" + s_index).after(
          '<div class="page_root section_3_' +
            s_index +
            " page_" +
            i +
            '"></div>'
        );
        $(".page_root.section_3_" + s_index + ".page_" + i).html(table);
      }
    }
  }
  var parameter = $(".section_3_html_root").data("page-params");
  parameter = JSON.parse(parameter);
  var html = "";
  $.each(parameter, function (s_index, item) {
    html +=
      '<div class="page_root large_0 section_3_' +
      s_index +
      '">' +
      (s_index == 0
        ? '<h1 class="section_title_1">第三章 试卷分析</h1><div class="abstract_box"><div class="abstract_left"><img src="/img/img2.png" /></div><div class="abstract_right"><div class="abstract_content">从学科试卷分析，帮我们从宏观的角度了解班级的水平和差异。系统从多个维度的数据进行学科对比分析，<strong>包括大题年级和班级的（平均分、得分率）、小题年级和班级的（平均分、得分率）。</strong></div></div></div>'
        : "") +
      '<h1 class="subjectinfo">' +
      item.subjectname +
      '试卷分析</h1><h2 class="section_title_2">1. 大题分析</h2><h3 class="section_title_3">1.1 大题分析</h3><div id="largeAnalysisEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div><h2 class="section_title_3">1.2 大题整体分析</h2><div class="largeAnalysistable"></div></div><div class="page_root section_3_' +
      s_index +
      '"><h2 class="section_title_2">2. 小题分析</h2><h3 class="section_title_3">2.1 小题分析</h3><div id="SmallAnalysisEcharts" style="margin: 0 4mm 4mm; height: 71mm"></div><h2 class="section_title_3_' +
      s_index +
      '">2.2 小题整体分析</h2><div class="SmallAnalysistable"></div></div>' +
      (item.points.length > 0
        ? '<div class="page_root page_0 section_3_' +
          s_index +
          '"><h2 class="section_title_2">3. 知识点掌握整体概况</h2><h3 class="section_title_3">3.1 知识点得分率分析</h3><div id="pointsAnalysisEcharts" style="margin: 0 4mm 4mm; height: 90mm"></div><h2 class="section_title_3">3.2 知识点整体分析</h2><div class="pointsAnalysistable"></div></div></div>'
        : "");
  });
  $(".ChapterThree").html(html);
  $.each(parameter, function (s_index, item) {
    initlargeAnalysisEcharts(s_index, item.types);
    initSmallAnalysisEcharts(s_index, item.questions);
    initpointsAnalysisEcharts(s_index, item.points);
  });

  //  document.documentElement.scrollTop = 1000;
});