schoolReportPDF/js/scoreAnalysis/section_2_part.js

$(function () {
  function classscorePartEcharts (s_index, obj) {
    var legend_data = [];
    legend_data.push(obj.subjectname);
    var xAxis_data = [];
    var dataArr = [];
    var list = $.grep(obj.ranks, function (val) {
      return val.classid == 0;
    });
    $.each(list, function (index, item) {
      xAxis_data.push(item.rankname);
      dataArr.push(item.stunum);
    });
    var series_data = [
      {
        name: obj.subjectname,
        type: "line",
        symbol: "circle",
        stack: obj.subjectname,
        label: {
          normal: {
            show: true,
            align: "center",
            verticalAlign: "bottom",
            position: "top",
            distance: 0,
            formatter: "{c}"
          }
        },
        data: dataArr
      }
    ];
    var option = {
      animation: false,
      title: {
        text: "人",
        x: "left",
        y: "top",
        textStyle: {
          color: "#5F6E82",
          fontSize: $.UnitUtil.mm2px(3),
          fontWeight: 500
        }
      },
      color: ["#5C99FF", "#ff5f56", "#5EC5C8", "#f1982b", "#6e5eff"],
      legend: {
        icon: "roundRect",
        itemWidth: $.UnitUtil.mm2px(2),
        itemHeight: $.UnitUtil.mm2px(2),
        top: "bottom",
        data: legend_data
      },
      grid: {
        top: $.UnitUtil.mm2px(10),
        left: 0,
        right: 0,
        bottom: $.UnitUtil.mm2px(8),
        containLabel: true
      },
      xAxis: {
        type: "category",
        axisLabel: {
          textStyle: {
            color: "#5F6E82"
          },
          interval: 2,
          rotate: 0
        },
        axisTick: {
          show: false
        },
        data: xAxis_data
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            color: "#9B9B9BFF"
          },
          interval: 0
        },
        minInterval: 1,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          //网格线
          lineStyle: {
            type: "solid", //设置网格线类型 dotted：虚线   solid:实线
            color: "#DADADA"
          },
          show: true //隐藏或显示
        },
        type: "value"
      },
      series: series_data
    };
    var myEcharts = echarts.init(
      $(".part_" + s_index + " #classPartEcharts")[0]
    );
    myEcharts.clear();
    myEcharts.setOption(option);
    showgraphicaldata(obj, xAxis_data, s_index);
  }
  function showgraphicaldata (obj, xAxis_data, s_index) {
    //图表数据
    var data = JSON.parse(JSON.stringify(obj));
    var calsslist = [];
    var tableobj = {};
    var num = -1;
    var rownum = 6;//一行七条数据
    // if(s_index != 0) return
    $.each(xAxis_data, function (idx, item) {
      if ((idx + rownum) % rownum == 0) {
        num++;
        tableobj[num+"trHtml"] = "";
        tableobj[num + "goodTableHeadTr1Html"] = '<th rowspan="2">班级</th>';
        tableobj[num + "goodTableHeadTr2Html"] = "";
      } 
      tableobj[num + "goodTableHeadTr1Html"] += '<th colspan="2">' + item + "</th>";
      tableobj[num+"goodTableHeadTr2Html"]+= "<th>人数</th><th>比例</th>";
    });
    $.each(data.ranks, function (idx, item) {
      if ($.inArray(item.classname, calsslist) == -1) {
        calsslist.push(item.classname);
      }
    })
    $.each(calsslist, function (index, items) {
      var num = -1;
      var classs = $.grep(data.ranks, function (val) {
        return val.classname == items;
      });
      $.each(xAxis_data, function (idx, item) {
        var rank = $.grep(classs, function (val) {
          return val.rankname == item;
        })[0];
        if ((idx + rownum) % rownum == 0) {
          num++;
          if (index == 0) {
            tableobj[num + "trHtml"] += "<tr>";
          } else {
            tableobj[num + "trHtml"] += "</tr><tr>";
          }
            tableobj[num+"trHtml"] += '<td><div class="my_cell">' + items + "</div></td>";
       }
        tableobj[num+"trHtml"] +=
          '<td><div class="my_cell">' +
          rank.stunum +
          '</div></td><td><div class="my_cell">' +
          rank.sturate +
          "%</div></td>";
      });
       
    })
    //计算表格高度 页面高1047 剩余高度700 表头62.5  内容27.42
    var tableheight = (calsslist.length * 27.5+62.5 +15) * (num+1);
    var page = {
      1:"",2:"",3:""
    }; //页数
    var table = "";
    var itemheight = calsslist.length * 27.5 + 62.5 + 15; //单表高度
    var maxheight = 0;
    for (var i = 0; i < num + 1; i++){
      maxheight = itemheight * (i + 1)
      var content = '  <table border="1" class="my_table"><thead><tr class="goodTableHeadTr1">' +
        tableobj[i + "goodTableHeadTr1Html"] + '</tr><tr class="goodTableHeadTr2">' +
        tableobj[i + "goodTableHeadTr2Html"] + '</tr></thead><tbody class="goodTableTbody">' +
        tableobj[i + "trHtml"] + '</tbody></table>';
      //计算剩余高度是否能显示最后一个表格
      if (maxheight > 700 || 700-maxheight<itemheight) {
        page[1] += content;
      } else if (maxheight > 1747 || 1747-maxheight<itemheight) {
        page[2] += content;
      } else {
        table += content;
      }
    }
    $(".part_" + s_index + " .table_" + s_index + " ").html(table);
    if (tableheight > 700) {
      //添加第一页
      $(".part_" + s_index).after('<div class="page_root section_2_part part_' +
      s_index +
        '_1"></div>')
      $(".part_" + s_index + "_1").html(page[1]);
    } else if (tableheight > 1747) {
      //添加第二页
      $(".part_" + s_index+'_1').after('<div class="page_root section_2_part part_' +
      s_index +
        '_2"></div>')
      $(".part_" + s_index + "_2").html(page[2]);
    }
  }
  var parameter = $(".section_2_html_root .section_2_part_html_root").data(
    "page-params"
  );
  parameter = JSON.parse(parameter);
  // console.log(parameter);
  var subjectInfo = [];
  for (var sid in parameter) {
    if (sid === "zf") {
      subjectInfo.unshift({
        subjectid: sid,
        subjectname: "全部年级",
        ranks: parameter[sid].ranks,
        maxscore: parameter[sid].maxscore
      });
    } else {
      subjectInfo.push({
        subjectid: sid,
        subjectname: parameter[sid].subjectname,
        ranks: parameter[sid].ranks,
        maxscore: parameter[sid].maxscore
      });
    }
  }
  var singleRootHtml = "";
  $.each(subjectInfo, function (s_index, s_item) {
    singleRootHtml +=
      '<div class="page_root section_2_part part_' +
      s_index +
      '">' +
      (s_index === 0 ? '<h2 class="section_title_2">3.分数分段对比</h2>' : "") +
      '<h3 class="section_title_3">3.' +
      (s_index + 1) +
      " " +
      s_item.subjectname +
      '分数段统计</h3><h4 class="section_title_4">3.' +
      (s_index + 1) +
      '.1 各分数段分析</h4><div>当前设置分数段：<span class="curscorepart">10</span>分/段</div><div id="classPartEcharts" style="margin: 0 4mm 4mm; height: 80mm"></div><h4 class="section_title_4" > 3.' +
      (s_index + 1) +
      '.2 各班等级比例分布 </h4><div class="tables table_'+s_index+'" ></div ></div > ';
    
  });
  $(".section_2_part_root").html(singleRootHtml);
  $.each(subjectInfo, function (s_index, s_item) { 
    $(".part_ " + s_index + " .curscorepart").text(s_item.maxscore);
    classscorePartEcharts(s_index, s_item);
    // var height = $(".part_" + s_index).height()
  })
});