<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--  <script src="echarts.min.js"></script>-->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>
<body>
  <div id="app">
    <el-container>
      <el-header>
        <h2 class="el-icon-document-copy">自动化测试报告</h2>
      </el-header>
      <el-container>
        <el-aside width="600px" style="margin-top: 20px">
          <el-card shadow="hover" style=";margin-bottom: 20px">
            <h3>执行成功率</h3>
            <div id="main" style="width: 500px;height:400px"></div>
          </el-card>
          <el-card shadow="hover">
            <div id="main2" style="width: 500px;height:400px;"></div>
          </el-card>
        </el-aside>
        <el-main>
           <el-row>
             <el-col :span="7">
                <el-card shadow="hover">
                  <span style="font-size: small ">本次执行情况</span>
                   <el-tag type="primary" label="执行结果" effect="dark" style="float: right" size="small">执行</el-tag>
                  <el-divider></el-divider>
                  <span style="font-size: large; color: dodgerblue">本次共执行用例 {{summary.total}} 条</span>
                  <el-divider></el-divider>
                  <span style="font-size: small ">成功率 {{(summary.success_rate * 100).toFixed(2)}}% </span>
                </el-card>
             </el-col>
             <el-col :span="7">
                <el-card shadow="hover">
                  <span style="font-size: small ">异常情况</span>
                   <el-tag type="danger" label="执行结果" effect="dark" style="float: right" size="small">异常</el-tag>
                  <el-divider></el-divider>
                  <span style="font-size: large; color: indianred">本次共有失败用例 {{summary.failed}} 条</span>
                  <el-divider></el-divider>
                  <span style="font-size: small ">失败率 {{(summary.fail_rate * 100).toFixed(2)}}% </span>
                </el-card>
             </el-col>
             <el-col :span="7">
                <el-card shadow="hover">
                  <span style="font-size: small ">持续执行</span>
                   <el-tag type="warning" label="执行结果" effect="dark" style="float: right" size="small">持续</el-tag>
                  <el-divider></el-divider>
                  <span style="font-size: large; color: orangered">本次持续运行 {{summary.duration.toFixed(4)}}s</span>
                  <el-divider></el-divider>
                  <span style="font-size: small ">平均Case执行时间 {{(summary.avg_duration * 1000).toFixed(2)}} ms</span>
                </el-card>
             </el-col>
           </el-row>
           <el-card shadow="hover" style="margin-top: 20px">
             <h3>用例执行记录</h3>
              <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                height="600">
                <el-table-column
                  label="ID"
                  type="index"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="Case"
                  width="400">
                </el-table-column>
                <el-table-column
                  prop="result"
                  label="Result"
                >
                  <template slot-scope="scope">
                    <i class="el-icon-circle-check" style="color: green;font-size: large" v-if="scope.row.result==1"></i>
                    <i class="el-icon-circle-close" style="color: red;font-size: large" v-if="scope.row.result==0"></i>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="Time"
                  width="200">
                </el-table-column>
                <el-table-column
                  prop="duration"
                  label="Duration"
                  width="100">
                  <template slot-scope="scope">
                    <span>{{(scope.row.duration*1000).toFixed(2)}} ms</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="Action"
                >
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      style="color: rebeccapurple"
                      @click="viewLogs(scope.row.logs)"
                    >Logs</el-button>
                  </template>
                </el-table-column>
              </el-table>
           </el-card>
          <el-dialog
            title="日志"
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose">
            <span style="white-space: pre-wrap;">{{logs}}</span>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </el-main>
      </el-container>
    </el-container>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          visible: false,
          dialogVisible: false,
          tableData: ${cases},
          logs:'',
          summary: ${summary}
        }
      },
      methods:{
        viewLogs(logs){
          this.logs = logs;
          this.dialogVisible = true;
        }
      }
    })
  </script>
  <script type="text/javascript">

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    series: [{
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 1,
        splitNumber: 8,
        axisLine: {
            lineStyle: {
                width: 6,
                color: [
                    [0.25, '#FF6E76'],
                    [0.5, '#FDDD60'],
                    [0.75, 'darkslateblue'],
                    [1, '#7CFFB2']
                ]
            }
        },
        pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 20,
            offsetCenter: [0, '-60%'],
            itemStyle: {
                color: 'auto'
            }
        },
        axisTick: {
            length: 12,
            lineStyle: {
                color: 'auto',
                width: 2
            }
        },
        splitLine: {
            length: 20,
            lineStyle: {
                color: 'auto',
                width: 5
            }
        },
        axisLabel: {
            color: '#464646',
            fontSize: 20,
            distance: -60,
            formatter: function (value) {
                if (value === 0.875) {
                    return '优';
                }
                else if (value === 0.625) {
                    return '中';
                }
                else if (value === 0.375) {
                    return '良';
                }
                else if (value === 0.125) {
                    return '差';
                }
            }
        },
        title: {
            offsetCenter: [0, '-20%'],
            fontSize: 30
        },
        detail: {
            fontSize: 30,
            offsetCenter: [0, '30%'],
            valueAnimation: true,
            formatter: function (value) {
                return Math.round(value * 100) + '%';
            },
            color: 'auto'
        },
        data: [{
            value: ${success_rate},
            name: '执行成功率'
        }]
    }]
};

option && myChart.setOption(option);

</script>
  <script type="text/javascript">
    var chartDom = document.getElementById('main2');
    var myChart = echarts.init(chartDom);
    var option;

option = {
    title: {
        text: '用例执行情况',
        subtext: '本次执行成功失败比例',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: ${series_data},
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

option && myChart.setOption(option);
</script>
<style>
  .el-header, .el-footer {
    background-color: darkslateblue;
    text-align: center;
    color: white;
    /*line-height: 60px;*/
  }

  .el-col {
    margin-right: 10px;
  }

  .el-card{
    border-radius: 15px;
  }

  /*.el-aside {*/
  /*  background-color: #D3DCE6;*/
  /*  color: #333;*/
  /*  text-align: center;*/
  /*  line-height: 400px;*/
  /*}*/
</style>
</html>
