<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>性能测试平台</title>
<link rel="shortcut icon" href="/pts/img/favicon.ico">
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<!-- <script type="text/javascript" src="js/jquery-ui-1.10.4.min.js" ></script> -->
<script type="text/javascript" src="js/jquery.dataTables.js" ></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js" ></script>
<script type="text/javascript" src="easyui/easyui-lang-zh_CN.js" ></script>
<script type="text/javascript" src="js/chart/echarts.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="css/jquery.autocomplete.css" />
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css" />
<style type="text/css">
#head{
background-color:#DAEEF3 ;/* #3887C9 BEF5CD DAEEF3*/
border-color: #30A134;
}
#head-left{
float: left;
background-image: url("img/logo.png");
border: 1px sloid black;
width: 452px;height: 100%;
}
#head-right{
float: right;
-moz-box-sizing:border-box;
border: 1px sloid black;
width: 400px;
height: 100px;
padding-top:80px;
text-align: center;
/* pxposition: relative; */
font-size: 16px;
}
</style>
<script type="text/javascript">
$(function(){
$("#menu").tree({
url:"/pts/document/menu.action",
animate:true,
//checkbox:true,
/* data: [{
id:1,
text: '性能缺陷',
state: 'closed',
iconCls:"icon-attendance",
children: [{
id:1001,
text: '缺陷添加',
iconCls:"icon-pill_add",
url:"www.baidu.com"
},{
id:1002,
text: '缺陷查询',
iconCls:"icon-bug_query",
url:"news.baidu.com"
}]
},{
id:2,
text: '环境管理',
iconCls:"icon-system",
children:[{
id:2001,
text:"环境查询",
iconCls:"icon-computer",
url:"news.baidu.com"
},{
id:2002,
text:"环境添加",
iconCls:"icon-computer_add",
url:"news.baidu.com"
}]
},{
id:3,
text: '统计分析',
iconCls:"icon-chart_bar",
children:[{
id:3001,
text:"性能趋势",
iconCls:"chart_curve",
url:"news.baidu.com"
},{
id:3002,
text:"资源分配",
iconCls:"icon-monitor",
url:"news.baidu.com"
}]
}], */
//url返回成功
onLoadSuccess:function(node, data){
if(data){
$(data).each(function(index, value){
if (this.state == 'closed') {
$("#menu").tree("expandAll");
}
});
}
},
//点击事件
onClick: function(node){
if(node.url){
if($("#tabs").tabs('exists',node.text)) {
$("#tabs").tabs('select',node.text);
}else{
$('#tabs').tabs('add',{
title:node.text,
closable:true,
iconCls:node.iconCls,
href:node.url,
tabWidth:135,
tools:[{
iconCls:'icon-reload',
width:50,
handler:function(){
$("#tabs").tabs('getSelected').panel('refresh');
//alert('refresh');
}
}]
});
}
}else{
$("#menu").tree("toggle",node.target);
}
}
});
$('#tabs').tabs({
fit : true,
border:false,
justified:true,
pill:true,
state:true,
tabPosition:"top",
height:900,
/* onSelect:function(title){
alert(title+' is selected');
} */
});
//刷新当前页面
//var currentTab = $('#tabs').tabs('getSelected');
//$('#tabs').tabs("update",{tab:current_tab});
//刷新当前标签Tabs
/* function RefreshTab(currentTab) {
var url = $(currentTab.panel('options')).attr('href');
alert(url);
$('#tabs').tabs('update', {
tab: currentTab,
options: {
href: url
}
});
// currentTab.panel('refresh');
} */
$.messager.show({
msg : '请使用火狐、谷歌或者IE11，推荐使用火狐浏览器!消息将在5秒后关闭',
title : '提示',
timeout : 5000,
});
});
</script>
<!-- 性能测试管理平台 -->
</head>
<body id="body" class="easyui-layout">
<div id="head" data-options="region:'north',title:'性能测试平台'" style="height:130px;">
<div id="head-left"></div>
<div id="head-right" >
<span>欢迎:</span> <span></span><span></span><span>留言</span>
</div>
</div>
<div data-options="region:'west',title:'导航菜单',split:true" style="width:220px;background-color: #F3FFEC;">
<ul id="menu" class="easyui-tree" style="background-color: #E9FADF;"></ul>
</div>
<div data-options="region:'center'," style="background:#eee;">
<div id="tabs" style="background-color: #3897C5;"><!-- icon-house -->
<div title="主页" data-options="closable:true" iconCls="icon-house" style="padding:0 10px;display:block;">
<div style="margin:2px;margin-top:10px;padding-left:20px;width: 50%;height:100%;float: left;">
<fieldset style="height:90%;margin-top: 5px;">
<legend title="缺陷数">缺陷数</legend>
<div id="bugNum" style="width: 90%;height:90%;"> </div>
</fieldset>
</div>
<div style="padding-right:20px;margin-top:10px;width: 40%;height:100%;float:right;border-width:1px;border-color: black;">
<div style="border: 1px;height: 45%;position: relative;">
<fieldset style="height:100%;margin-top: 5px">
<legend title="资源占用数">资源占用数</legend>
<div id="appNum" style="width: 100%;height:100%;">
</div>
</fieldset>
</div>
<div style="border: 1px;height: 45%;position:relative;">
<fieldset style="height:100%">
<legend title="缺陷数">需求数</legend>
<div id="demandNum" style="width: 100%;height:100%;padding-top: 5px;">
</div>
</fieldset>
</div>
</div>
<a href="#" onclick="link_manage.fqa()" style="font-style: italic; width:100px; font-size: 16px;overflow: hidden; margin: 380px 30px 0 700px; position: absolute;">查看系统说明</a>
</div>
</div>
</div>
<script type="text/javascript">
require.config({
paths: {
echarts: 'js/chart'
}
});
// 使用
$(function(){
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/pie'//使用bingtu
],
function (ec) {
// 基于准备好的dom，初始化echarts实例
var bugChart = ec.init(document.getElementById("bugNum"));
var appChart = ec.init($("#appNum")[0]);
var demandChart = ec.init($("#demandNum")[0]);
//缺陷数
// 指定图表的配置项和数据
var bugOption = {
title: {
text: '性能测试问题排序',
subtext: '西丽环境'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['优化数','缺陷数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['posp','顺丰卡','理财', '顺手付','员工贷']
},
series: [
{
name: '优化数',
type: 'bar',
data: [5, 2, 7, 10, 18, 22]
},
{
name: '缺陷数',
type: 'bar',
data: [5, 3, 9, 15, 20, 25]
}
]
};
// 使用刚指定的配置项和数据显示图表。
bugChart.setOption(bugOption);
//服务器资源数
var appOption = {
title: {
text: '服务器资源使用数'
},
tooltip: {},
legend: {
data:['服务器资源数']
},
xAxis: {
data: ['posp','顺丰卡','理财', '顺手付','员工贷']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [6, 6, 16, 32, 8]
}]
};
// 使用刚指定的配置项和数据显示图表。
appChart.setOption(appOption);
//需求数
var demandOption = {
title : {
text: '需求数',
subtext: '统计',
x:'left'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
show:true,
x:'right',
y:'top',
data: ['posp','顺丰卡','理财', '顺手付','员工贷']
},
series : [
{
name: '个数',
type: 'pie',
radius : '55%',
center: ['50%', '65%'],
data:[
{value:2, name:'posp'},
{value:3, name:'顺丰卡'},
{value:5, name:'理财'},
{value:6, name:'顺手付'},
{value:2, name:'员工贷'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
demandChart.setOption(demandOption);
}
);
});
</script>
</body>
</html>
浙公网安备 33010602011771号