index.jsp
4.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="/pages/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><f:message key="common.title"/></title>
<meta
content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no'
name='viewport'>
<%@ include file="/pages/common/css.jsp"%>
</head>
<body class="skin-blue sidebar-mini">
<div class="wrapper">
<%@ include file="/pages/common/top.jsp"%>
<!-- Left side column. contains the logo and sidebar -->
<%@ include file="/pages/common/left.jsp"%>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>直播</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i>首页</a></li>
<li><a href="#">直播统计</a></li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">正在直播</h3>
</div>
<div class="box-body">
<c:forEach var="item" items="${livingActivity}" varStatus="stat">
<div class="info-box ${stat.index==0 ? 'bg-yellow':'bg-green'}">
<span class="info-box-icon"> ${fn:substring(item.name, 0,2)}</span>
<div class="info-box-content">
<h3>
<b>${item.name }</b>
</h3>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>
<span class="progress-description"> ${fn:substring(item.start_time, 0,16)} --${fn:substring(item.end_time, 11,16)}</span>
</div>
</div>
</c:forEach>
</div>
</div>
</div>
<div class="col-md-6">
<div class="box box-primary">
<div class="box-header ui-sortable-handle">
<i class="ion ion-clipboard"></i>
<h3 class="box-title">近期直播计划</h3>
<div class="box-tools pull-right"></div>
</div>
<!-- /.box-header -->
<div class="box-body">
<ul class="todo-list ui-sortable">
<c:forEach var="item" items="${recentActivity}"
varStatus="stat">
<li><i class="fa fa-ellipsis-v"></i> <i
class="fa fa-ellipsis-v"></i> <span class="text">${item.name }</span>
<small
class="label ${stat.index==0 ||stat.index==1 ? 'label-info':'label-warning'}">
<i class="fa fa-clock-o"></i>
${fn:substring(item.start_time, 0,16)} <i
class="fa fa-minus"></i> <i class="fa fa-minus"></i>${fn:substring(item.end_time, 11,16)}</small>
</li>
</c:forEach>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="box box-success">
<div class="box-header with-border">
<h3 class="box-title">直播统计</h3>
</div>
<div class="box-body">
<div class="chart" id="container"></div>
</div>
</div>
</div>
</div>
</section>
</div>
<%@ include file="/pages/common/bottom.jsp"%>
</div>
<%@ include file="/pages/common/js.jsp"%>
<script type="text/javascript"
src="${BASE}/static/assets/plugins/highcharts/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript"
src="${BASE}/static/assets/plugins/highcharts/js/highcharts.js"></script>
<script type="text/javascript"
src="${BASE}/static/assets/plugins/highcharts/js/theme/grid.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(
function() {
chart = new Highcharts.Chart({
chart : {
renderTo : 'container', //放置图表的容器
plotBackgroundColor : null,
plotBorderWidth : null,
defaultSeriesType : 'column' //图表类型line, spline, area, areaspline, column, bar, pie , scatter
},
title : {
text : '频道直播活动统计'
},
xAxis : {//X轴数据
categories : [ ${recentMonths} ],
labels : {
rotation : -45, //字体倾斜
align : 'right',
style : {
font : 'normal 13px 宋体'
}
}
},
yAxis : {//Y轴显示文字
title : {
text : '场次/次'
}
},
tooltip : {
enabled : true,
formatter : function() {
return '<b>' + this.x + '</b><br/>'
+ this.series.name + ': '
+ Highcharts.numberFormat(this.y, 1)
+ "场";
}
},
plotOptions : {
column : {
dataLabels : {
enabled : true
},
enableMouseTracking : true
//是否显示title
}
},
series : ${channelCountJson}
});
});
</script>
</body>
</html>