<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试报告</title>
  <!-- https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css -->
  <link rel="stylesheet" href="static/bootstrap.min.css" type="text/css">
  <!--    页面样式-->
  <style type="text/css">
      /*标题样式*/
      .title {
          width: auto;
          height: 60px;
          text-align: center;
          font: bolder 38px/60px "Microsoft YaHei UI";
      }

      /*汇总信息样式*/
      .summary {
          width: 90%;
          position: absolute;
          top: 120px;
          margin-left: 5%;

      }

      .text-left {
          font: bolder 20px/30px "Microsoft YaHei UI";
      }

      .left {
          width: 50%;
          float: left;

      }

      .right {
          width: 50%;
          float: right;

      }

      .desc {
          float: left;
          width: 100%;
      }

      .list-group-item span {
          font: normal 16px/38px "Microsoft YaHei UI";
          padding: 30px;

      }

      .list-group-item {
          position: relative;
          display: block;
          padding: .4rem 1.25rem;
          background-color: #fff;
          border: 1px solid rgba(0, 0, 0, .125);
      }

      /* 执行信息样式   */
      .test_info {
          width: 90%;
          position: absolute;
          top: 900px;
          margin-left: 5%;

          color: #28a745 !important;
      }

      .table td, th {
          border: solid 2px rgba(9, 122, 51, 0.11) !important;
          padding: 0;
          line-height: 40px;
          text-align: center;

      }


      select {
          border: 0;
          padding: 0;
          margin: 0;
          height: 2em;
          width: 8em;
          margin-left: 2em;
      }

      option {
          text-align: center;
          height: 36px;
          font: none 18px/36px "Microsoft YaHei UI";
          color: #28a745 !important;
      }

      .test_log {
          background: rgba(163, 171, 189, 0.15);
          width: 100%;
          height: 50px;
          border-top: none;
          border-bottom: none;
          display: none;
          text-align: left;
      }

      .test_log td {
          text-align: left;
          height: 30px;
          margin: 0;
          padding-left: 3em;
          padding-right: 3em;
          font: none 18px/24px "Microsoft YaHei UI";
          color: #9e141a;
      }

      pre {
          margin: 0;
          white-space: pre-wrap;
          white-space: -moz-pre-wrap;
          white-space: -o-pre-wrap;
          word-wrap: break-word;
      }

      /*    测试图表显示*/
      .char {
          width: 90%;
          position: absolute;
          top: 450px;
          margin-left: 5%;
          color: #28a745 !important;
      }

  </style>

</head>
<body>

<!--报告标题-->
<div class="title text-success">
  <div class="shadow-lg p-3 mb-5 bg-white rounded">{{ title }}</div>
</div>

<!--汇总信息-->
<div class="summary">
  <p class="text-left text-success">测试结果汇总</p>
  <div class="left">
    <ul class="list-group">
      <li class="list-group-item">
        <button type="button" class="btn btn-success">测试人员</button>
        <span class="text-dark">{{ tester }}</span>
      </li>
      <li class="list-group-item">
        <button type="button" class="btn btn-success">开始时间</button>
        <span class="text-dark">{{ begin_time }}</span>
      </li>
      <li class="list-group-item">
        <button type="button" class="btn btn-success">执行时间</button>
        <span class="text-dark">{{ duration }}</span>
      </li>
      <li class="list-group-item">
        <button type="button" class="btn btn-success">用例总数</button>
        <span class="text-dark">{{ total }}</span>
      </li>


    </ul>
  </div>
  <div class="right">
    <ul class="list-group">

      <li class="list-group-item">
        <button type="button" class="btn btn-success">成功用例</button>
        <span class="text-success">{{ passed }}</span>
      </li>
      <li class="list-group-item">
        <button type="button" class="btn btn-danger">失败用例</button>
        <span class="text-warning">{{ failed }}</span>
      </li>
      <li class="list-group-item">
        <button type="button" class="btn btn-warning">错误用例</button>
        <span class="text-danger">{{ error }}</span>
      </li>
      <li class="list-group-item">
        <button type="button" class="btn btn-secondary">跳过用例</button>
        <span class="text-secondary">{{ skipped }}</span>
      </li>
    </ul>
  </div>
  <div class="desc">
    <ul class="list-group">
      <li class="list-group-item">
        <button type="button" class="btn btn-success">描述信息</button>
        <span class="text-secondary">{{ desc }}</span>
      </li>
    </ul>
  </div>
</div>

<!--测试图表-->
<div class="char">
  <p class="text-left text-success">图表展示</p>
  <div id="char2" style="width: 49%;height: 400px;float: left"></div>
  <div id="char" style="width: 49%;height: 400px ;float: left"></div>
</div>

<!--详细信息-->
<div class="test_info">

  <p class="text-left text-success">详细信息</p>
  <div class="table_data">

    <table class="table">
      <thead class="bg-success text-light">
      <tr>
        <th scope="col" style="width: 5%;padding: 0">编号</th>
        <th scope="col" style="width: 20%;padding: 0">
          <span>用例模块</span>
          <select id="testClass">
            <option>所有</option>
            {% for foo in testModules %}
              <option value="{{ foo|replace('\\','')|replace('.','') }}">{{ foo }}</option>
            {% endfor %}
          </select>
        </th>
        <th scope="col" style="width: 15%;padding: 0">测试方法</th>
        <th scope="col" style="width: 20%;padding: 0">用例描述</th>
        <th scope="col" style="width: 10%;padding: 0">执行时间</th>
        <th scope="col" style="width: 20%;padding: 0">

          <span>执行结果</span>
          <select id="testResult">
            <option>所有</option>
            <option class="text-success">成功</option>
            <option class="text-warning">失败</option>
            <option class="text-danger">错误</option>
            <option class="text-info">跳过</option>
          </select>

        </th>
        <th scope="col" style="width: 10%;padding: 0">详细信息</th>
      </tr>
      </thead>
      <tbody>
      {% for name, foo in cases.items() %}
        <tr>


          <td>{{ loop.index }}</td>
          <td class="{{ foo.moduleName|replace('\\','')|replace('.','') }}">{{ foo.moduleName }}</td>
          <td>{{ foo.method }}</td>
          <td>{{ foo.desc }}</td>
          <td>{{ foo.duration }}</td>
          {% if foo.outcome == 'passed' %}
            {% if foo.rerun %}
              <td style="color: #fa6f6f">通过</td>
            {% else %}
              <td class="text-success">通过</td>
            {% endif %}
          {% elif foo.outcome == 'failed' %}
            <td class="text-warning">失败</td>
          {% elif foo.outcome == 'error' %}
            <td class="text-danger">错误</td>
          {% else %}
            <td class="text-info">跳过</td>
          {% endif %}
          <td>
            <button type="button" class="btn btn-success btn_info">查看详情</button>
          </td>
        </tr>
        <tr class="test_log">
          <td colspan="7" class="small text-muted" style=" word-wrap:break-word; word-break:break-all;padding: 0">
            <div class="card">
              <div class="card-body">
                <ul class="nav nav-tabs" role="tablist">
                  <li class="nav-item" role="presentation">
                    <a class="nav-link active" data-toggle="tab" role="tab" aria-controls="home"
                       aria-selected="true" style="padding: 0 16px">运行日志</a>
                  </li>
                  <li class="nav-item" role="presentation">
                    <a class="nav-link" data-toggle="tab" role="tab" aria-controls="profile"
                       aria-selected="false" style="padding: 0 16px">调试输出</a>
                  </li>
                  {% if foo.longreprtext %}
                    <li class="nav-item" role="presentation">
                      <a class="nav-link" data-toggle="tab" role="tab" aria-controls="contact"
                         aria-selected="false" style="padding: 0 16px">异常信息</a>
                    </li>
                  {% endif %}
                  {% if foo.rerun %}
                    <li class="nav-item" role="presentation">
                      <a class="nav-link" data-toggle="tab" role="tab" aria-controls="contact"
                         aria-selected="false" style="padding: 0 16px"><span
                              style="color: #ff3c00">重运行次数:{{ foo.rerun }}</span></a>
                    </li>
                  {% endif %}

                </ul>
                <div class="tab-content" style="height: 300px;overflow-y: auto;padding: 20px">

                  <div class="tab-pane fade show active" role="tabpanel" aria-labelledby="profile-tab">
                    <pre style="line-height: 18px">{{ foo.capstderr }}</pre>
                  </div>
                  <div class="tab-pane fade" role="tabpanel" aria-labelledby="contact-tab">
                    <pre style="line-height: 18px">{{ foo.capstdout }}</pre>
                  </div>
                  {% if foo.longreprtext %}
                    <div class="tab-pane fade " role="tabpanel" aria-labelledby="home-tab">
                      <pre style="line-height: 18px">{{ foo.longreprtext }}</pre>
                    </div>
                  {% endif %}
                  {% if foo.rerun %}
                    <div class="tab-pane fade show active" role="tabpanel" aria-labelledby="profile-tab">
                      <pre style="line-height: 18px">{{ foo.capstderr }}</pre>
                    </div>
                  {% endif %}


                </div>
              </div>
            </div>
          </td>
        </tr>
      {% endfor %}

      </tbody>
    </table>
  </div>

  <div style="height: 200px"></div>
</div>

<!-- https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js -->
<script src="static/jquery.slim.min.js" type="text/javascript"></script>
<!-- https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js -->
<script type="text/javascript" src="static/echarts.min.js"></script>

<script>
  var tbodyTr = $('tbody tr');
  var testResult = $("#testResult");
  var testClass = $("#testClass");
  <!--    用例执行详细信息显示切换-->
  $(".btn_info").click(function () {
    $(this).parent().parent().next().toggle();

  });
  // 当选择用例类之后触发
  testClass.change(function () {
    var cls = $(this).val();
    var res = testResult.val();
    elementDisplay(cls, res);
    sort()
  });
  testResult.change(function () {
    var res = $(this).val();
    var cls = testClass.val();
    elementDisplay(cls, res);
    sort()
  });

  function elementDisplay(cls, res) {
    // 用例数据的显示
    if (cls === "所有") {
      if (res === "所有") {
        tbodyTr.has('button').show();
      } else if (res === '成功') {
        tbodyTr.hide();
        tbodyTr.has('button').has('.text-success').show()

      } else if (res === '失败') {
        tbodyTr.hide();
        tbodyTr.has('button').has('.text-warning').show()

      } else if (res === '错误') {
        tbodyTr.hide();
        tbodyTr.has('button').has('.text-danger').show()

      } else if (res === '跳过') {
        tbodyTr.hide();
        tbodyTr.has('button').has('.text-info').show()
      }
    } else {
      if (res === "所有") {
        tbodyTr.hide();
        tbodyTr.has('button').has('.' + cls + '').show()
      } else if (res === '成功') {
        tbodyTr.hide();
        tbodyTr.has('button').has('.' + cls + '').has('.text-success').show()
      } else if (res === '失败') {
        tbodyTr.hide();
        tbodyTr.has('button').has('.' + cls + '').has('.text-warning').show()
      } else if (res === '错误') {
        tbodyTr.hide();
        tbodyTr.has('button').has('.' + cls + '').has('.text-danger').show()
      } else if (res === '跳过') {
        tbodyTr.hide();
        tbodyTr.has('button').has('.' + cls + '').has('.text-info').show()
      }
    }
  }

  function sort() {
    //重新排列显示序号
    // 选择所有可以见的tr
    var visibleTr = tbodyTr.filter(":visible");

    visibleTr.each(function (index, element) {
      element.firstElementChild.innerHTML = index + 1;

    })

  }

  $('.nav-tabs li').click(function () {
    $(this).find('a').addClass('active')
    $(this).siblings().find('a').removeClass('active');
    $(this).parent().next().children('.tab-content div').eq($(this).index()).addClass('active show').siblings().removeClass('active show')
  });
</script>

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('char'));
  var myChart2 = echarts.init(document.getElementById('char2'));
  // 指定图表的配置项和数据
  option = {
    color: ['#00a10a', '#ddb518', 'rgba(204,46,41,0.73)', '#85898c'],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 10,
      data: ['通过', '失败', '错误', '跳过']
    },
    series: [
      {
        name: '测试结果',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          {value: {{passed}}, name: '通过'},
          {value: {{failed}}, name: '失败'},
          {value: {{error}}, name: '错误'},
          {value: {{skipped}}, name: '跳过'}
        ]
      }
    ]
  };
  option2 = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%'
    },
    toolbox: {
      feature: {
        restore: {},
        saveAsImage: {}
      }
    },
    series: [
      {
        name: '测试结果',
        type: 'gauge',
        detail: {formatter: '{{pass_rate}}%'},
        data: [{value: '{{pass_rate}}', name: '用例通过率'}],
        axisLine: {
          lineStyle: {
            color: [
              [0.2, '#c20000'],
              [0.8, '#ddb518'],
              [1, '#00a10a']]
          }
        }
      }
    ]
  };


  myChart2.setOption(option2);
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
</script>


</body>
</html>