<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>LuckyFrame中心</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/animate.min.css" th:href="@{/css/main/animate.min.css}" rel="stylesheet"/>
    <link href="../static/css/main/style.min862f.css" th:href="@{/css/main/style.min862f.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
    <div class="row  border-bottom white-bg dashboard-header">
    
        <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">持续</span>
                    <h5>自动化已运行</h5>
                </div>
                <div class="ibox-content">
                    <h1 id="taskcount" class="no-margins text-success"><i class="fa fa-spinner fa-spin"></i></h1>
                    <br></br>
                    <div class="stat-percent font-bold text-success" id="taskper">0 <i class="fa fa-cog fa-spin"></i>
                    </div>
                    <strong>执行任务</strong>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">规模</span>
                    <h5>用例库</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins text-danger" id="addcasecount"><i class="fa fa-spinner fa-spin"></i></h1>
                    <br></br>
                    <div class="stat-percent font-bold text-danger" id="addcase">0条 <i class="fa fa-cog fa-spin"></i>
                    </div>
                    <strong>30天内更新</strong>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-warning pull-right">计算</span>
                    <h5>每天节省</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins text-warning" id="logcount"><i class="fa fa-spinner fa-spin"></i></h1>
                    <br></br>
                    <div class="stat-percent font-bold text-warning" id="logper">0 <i class="fa fa-cog fa-spin"></i>
                    </div>
                    <strong>日志统计</strong>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">统计</span>
                    <h5>用例执行</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins text-info" id="casecount"><i class="fa fa-spinner fa-spin"></i></h1>
                    <br></br>
                    <div class="stat-percent font-bold text-info" id="caseper">0% <i class="fa fa-cog fa-spin"></i>
                    </div>
                    <strong>成功率</strong>
                </div>
            </div>
        </div>
    </div>
        <!-- 图表展示 -->
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>近30天用例执行概况</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                           <div id="main" style="width: 100%;height:300px;"></div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    </div>
    
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">

                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>做最好的开源测试平台</h5>
                    </div>
                    <div class="ibox-content">
                        <p><span class="label label-warning">&yen; 免费开源 AGPL-3.0</span></p>
                        <p><i class="fa fa-flag"></i> 当前版本：<span>V[[${version}]]</span></p>
                        <p><i class="fa fa-send-o"></i> 官网：<a href="http://www.luckyframe.cn" target="_blank">http://www.luckyframe.cn</a>
                        </p>
                        <p><i class="fa fa-git"></i> Web端码云：<a href="https://gitee.com/seagull1985/LuckyFrameWeb" target="_blank">https://gitee.com/seagull1985/LuckyFrameWeb</a>
                        </p>
                        <p><i class="fa fa-git"></i> 客户端码云：<a href="https://gitee.com/seagull1985/LuckyFrameClient" target="_blank">https://gitee.com/seagull1985/LuckyFrameClient</a>
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>扫一扫关注公众号</h5>
                    </div>
                    <div class="ibox-content no-padding">
                        <div class="panel-body" style="text-align:center;">
                          <img th:src="@{/img/gzh_code.jpg}" width="50%" >
                          <br>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>扫一扫加入QQ群</h5>
                    </div>
                    <div class="ibox-content no-padding">
                        <div class="panel-body" style="text-align:center;">
                          <img th:src="@{/img/qq.png}" width="50%" >
                          <br>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>付费知识星球</h5>
                    </div>
                    <div class="ibox-content no-padding">
                        <div class="panel-body" style="text-align:center;">
                          <img th:src="@{/img/zsxq.jpg}" width="50%" >
                          <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div th:include="include::footer"></div>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script type="text/javascript">
    var prefix = ctx + "testexecution/taskCaseExecute";
    
    $(function getShowData(){
		var url = prefix+"/getMainData.do";
		$.ajax({
			type:"GET",
			url:url,
			cache:false,
			dataType:"json",
			success:function (result){
				document.getElementById("taskcount").innerHTML = result.taskdata[0];
				document.getElementById("taskper").innerHTML = result.taskdata[1]+" 个 <i class=\"fa fa-tasks\"></i>";
				document.getElementById("casecount").innerHTML = result.casedata[0]+" 条";
				document.getElementById("caseper").innerHTML = result.casedata[1]+" % <i class=\"fa fa-bolt\"></i>";
				document.getElementById("logcount").innerHTML = result.logdata[0]+" 人";
				document.getElementById("logper").innerHTML = result.logdata[1]+" 条 <i class=\"fa fa-indent\"></i>";
				document.getElementById("addcasecount").innerHTML = result.caseadddata[0]+" 条";
				document.getElementById("addcase").innerHTML = result.caseadddata[1]+" 条 <i class=\"fa fa-thumbs-up\"></i>";
			  }
			});
	});
    
    var casetotal;
    var casesuc;
    var casefail;
    var caselock;
    var casenoex;
    var casedate;
	$(function getReportData(){
		var url = prefix+"/getMianLineReport.do";
		$.ajax({
			type:"GET",
			url:url,
			cache:false,
			dataType:"json",
			success:function (result){
				casetotal = result.casetotal;
				casesuc = result.casesuc;
				casefail = result.casefail;
				caselock = result.caselock;
				casenoex = result.casenoex;
				casedate = result.casedate;
				inireport();
			  }
			});
	});
	
    // 使用
    function inireport() {
            // 基于准备好的dom，初始化echarts图表
            var myChart = echarts.init(document.getElementById('main')); 
            var loadingTicket;
            var effect = ['Loadding','努力奔跑中','正在加载中','正在获取数据'];
            var random = Math.floor(Math.random()*effect.length);

            myChart.showLoading({
                text : effect[random],
                effect : effect[random],
                textStyle : {
                    fontSize : 20
                }
            });
            
            var option = {
            	    title: {
            	        text: '30天用例执行概况图'
            	    },
            	    tooltip : {
            	        trigger: 'axis',
            	        axisPointer: {
            	            type: 'cross',
            	            label: {
            	                backgroundColor: '#8B4513'
            	            }
            	        }
            	    },
            	    legend: {
            	        data:['总用例','成功用例','失败用例','锁定用例','未执行']
            	    },
            	    toolbox: {
            	        show : true,
            	        feature : {
            	            saveAsImage : {show: true}
            	        }
            	    },
            	    grid: {
            	        left: '3%',
            	        right: '4%',
            	        bottom: '3%',
            	        containLabel: true
            	    },
            	    xAxis : [
            	        {
            	            type : 'category',
            	            boundaryGap : false,
            	            data : casedate
            	        }
            	    ],
            	    yAxis : [
            	        {
            	            type : 'value'
            	        }
            	    ],
            	    series : [
                  	   {
                	       name:'总用例',
                	       type:'line',
                	       markPoint: {
               	            data: [
               	                {type: 'max', name: '最大执行数'}
               	            ], 
               	            animationDelay: 1000,
               	            animationDuration: 1000
               	           },
               	        lineStyle: {
                            normal: {
                                width: 1,
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [{
                                        offset: 0, color: 'grey' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'blue' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                },
                                opacity: 0.9
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(0, 236, 212, 0.3)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(0, 236, 212, 0)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: 'rgb(0,136,212)',
                                borderColor: 'rgba(0,136,212,0.2)',
                                borderWidth: 5
                            }
                        },
                	       data:casetotal
                	    },
            	        {
            	            name:'成功用例',
            	            type:'line',
            	            markPoint: {
                   	            data: [
                   	                {type: 'max', name: '最大成功数'}
                   	            ],
                   	            animationDelay: 1000,
                   	            animationDuration: 1000
                   	        },
                   	     lineStyle: {
                	            normal: {
                	                width: 1,
                	                color: {
                	                    type: 'linear',
                	                    x: 0,
                	                    y: 0,
                	                    x2: 1,
                	                    y2: 0,
                	                    colorStops: [{
                	                        offset: 0, color: 'grey' // 0% 处的颜色
                	                    }, {
                	                        offset: 1, color: 'green' // 100% 处的颜色
                	                    }],
                	                    globalCoord: false // 缺省为 false
                	                },
                	                opacity: 0.9
                	            }
                	        },
                	        areaStyle: {
                	            normal: {
                	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                	                    offset: 0,
                	                    color: 'rgba(137, 189, 27, 0.4)'
                	                }, {
                	                    offset: 0.8,
                	                    color: 'rgba(137, 189, 27, 0.1)'
                	                }], false),
                	                shadowColor: 'rgba(0, 0, 0, 0.1)',
                	                shadowBlur: 10
                	            }
                	        },
                	        itemStyle: {
                	            normal: {
                	                color: 'rgb(137,189,27)',
                	                borderColor: 'rgba(137,189,2,0.27)',
                	                borderWidth: 5

                	            }
                	        },
            	            data:casesuc
            	        },
            	        {
            	            name:'失败用例',
            	            type:'line',
            	            markPoint: {
                   	            data: [
                   	                {type: 'min', name: '最小失败数'}
                   	            ],
                   	            animationDelay: 1000,
                   	            animationDuration: 1000
                   	        },
                   	     lineStyle: {
                             normal: {
                                 width: 1,
                                 color: {
                                     type: 'linear',
                                     x: 0,
                                     y: 0,
                                     x2: 1,
                                     y2: 0,
                                     colorStops: [{
                                         offset: 0, color: 'grey' // 0% 处的颜色
                                     }, {
                                         offset: 1, color: 'red' // 100% 处的颜色
                                     }],
                                     globalCoord: false // 缺省为 false
                                 },
                                 opacity: 0.9
                             }
                         },
                         areaStyle: {
                             normal: {
                                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                     offset: 0,
                                     color: 'rgba(219, 50, 51, 0.3)'
                                 }, {
                                     offset: 0.8,
                                     color: 'rgba(219, 50, 51, 0)'
                                 }], false),
                                 shadowColor: 'rgba(0, 0, 0, 0.1)',
                                 shadowBlur: 10
                             }
                         },
                         itemStyle: {
                             normal: {

                                 color: 'rgb(219,50,51)',
                                 borderColor: 'rgba(219,50,51,0.2)',
                                 borderWidth: 5
                             }
                         },
            	            data:casefail
            	        },
            	        {
            	            name:'锁定用例',
            	            type:'line',
            	            data:caselock
            	        },
            	        {
            	            name:'未执行',
            	            type:'line',
            	            data:casenoex
            	        }
            	    ]
            	};
    		
        	clearTimeout(loadingTicket);
        	loadingTicket = setTimeout(function (){
        	    myChart.hideLoading();
        	    myChart.setOption(option);
        	},2200);
        // 为echarts对象加载数据 
       // myChart.setOption(option); 
        }
    </script>
</body>
</html>
