<html lang="zh-cn">
|
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="referrer" content="never">
|
<title>播放数据</title>
|
<link href="css/bootstrap.min.css" rel="stylesheet">
|
<link href="css/maincontent.css" rel="stylesheet">
|
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
|
|
<style>
|
.clear_left_right {
|
padding-left: 0;
|
padding-right: 0;
|
}
|
|
#search_result tr {
|
height: 100px;
|
}
|
|
#search_result td {
|
padding-right: 20px;
|
height: 100px;
|
word-break: break-word;
|
}
|
</style>
|
</head>
|
|
<body>
|
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
</nav>
|
<div id="mainbody">
|
<div id="sidebar">
|
</div>
|
<div id="contentyouce">
|
<div class="container-fluid" style="padding-top:80px;">
|
<ul id="myTab" class="nav nav-tabs">
|
<li class="active">
|
<a href="#totalplay" data-toggle="tab">
|
播放总量</a>
|
</li>
|
<li>
|
<a href="#typeplay" data-toggle="tab">类型播放量</a>
|
</li>
|
|
<li>
|
<a href="#sigleplay" data-toggle="tab">单个视频播放量</a>
|
</li>
|
|
<li>
|
<a href="#sexplay" data-toggle="tab">性别播放量分布</a>
|
</li>
|
|
<li>
|
<a href="#ageplay" data-toggle="tab">年龄播放量分布</a>
|
</li>
|
|
<li class="dropdown" style="display: none;">
|
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">
|
Java <b class="caret"></b></a>
|
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
|
<li>
|
<a href="#jmeter" tabindex="-1" data-toggle="tab">jmeter</a>
|
</li>
|
<li>
|
<a href="#ejb" tabindex="-1" data-toggle="tab">ejb</a>
|
</li>
|
</ul>
|
</li>
|
</ul>
|
|
<div id="myTabContent" class="tab-content">
|
<div class="tab-pane fade in active" id="totalplay" style="background-color: #FFFFFF;">
|
<form class="container" style="padding-top: 20px;">
|
|
<div class="col-lg-3">
|
<div class="col-lg-4" style="padding-right: 0;"><label>起始时间 </label></div>
|
<div class="col-lg-8"><input type="text" id="starttime_totalplay" readonly class="form_date form-control" /></div>
|
</div>
|
<div class="col-lg-3">
|
<div class="col-lg-4" style="padding-right: 0;"><label>结束时间 </label></div>
|
<div class="col-lg-8"><input type="text" id="endtime_totalplay" readonly class="form_date form-control" /></div>
|
</div>
|
<div class="col-lg-2">
|
<select class="form-control" id="fastdate_totalplay">
|
<option value="0">/</option>
|
<option value="1">今天</option>
|
<option value="2">昨天</option>
|
<option value="7">最近7天</option>
|
<option value="30">最近1个月</option>
|
</select>
|
</div>
|
|
<div class="col-lg-2">
|
<select class="form-control" id="detailsystem_totalplay">
|
<option value="0">全部</option>
|
<option value="42">布丸视频</option>
|
<option value="44">布丸影视大全</option>
|
<option value="43">布丸影视大全IOS</option>
|
</select>
|
</div>
|
|
<div class="col-lg-1">
|
<input type="button" class="form-control btn btn-primary" id="sure_totalplay" value="确定" />
|
</div>
|
</form>
|
|
<div id="container_totalplay" style="min-width:400px;height: 700px;width: 100%;">
|
|
</div>
|
</div>
|
<div class="tab-pane fade" id="typeplay" style="background-color: #FFFFFF;">
|
<form class="container" style="padding-top: 20px;">
|
|
<div class="col-lg-3">
|
<div class="col-lg-4" style="padding-right: 0;"><label>起始时间 </label></div>
|
<div class="col-lg-8"><input type="text" id="starttime_typeplay" readonly class="form_date form-control" /></div>
|
</div>
|
<div class="col-lg-3">
|
<div class="col-lg-4" style="padding-right: 0;"><label>结束时间 </label></div>
|
<div class="col-lg-8"><input type="text" id="endtime_typeplay" readonly class="form_date form-control" /></div>
|
</div>
|
<div class="col-lg-2">
|
<select class="form-control" id="fastdate_typeplay">
|
<option value="0">/</option>
|
<option value="1">今天</option>
|
<option value="2">昨天</option>
|
<option value="7">最近7天</option>
|
<option value="30">最近1个月</option>
|
</select>
|
</div>
|
|
<div class="col-lg-2">
|
<select class="form-control" id="detailsystem_typeplay">
|
<option value="0">全部</option>
|
<option value="42">布丸视频</option>
|
<option value="44">布丸影视大全</option>
|
<option value="43">布丸影视大全IOS</option>
|
</select>
|
</div>
|
|
<div class="col-lg-1">
|
<input type="button" class="form-control btn btn-primary" id="sure_typeplay" value="确定" />
|
</div>
|
</form>
|
|
<div id="container_typeplay" style="min-width:400px;height: 800px;width: 100%;"></div>
|
</div>
|
<div class="tab-pane fade" id="sigleplay" style="background-color: #FFFFFF;">
|
<form class="container" style="padding-top: 20px;width: 100%;">
|
|
<div class="col-lg-3 clear_left_right" style="padding-right: 0;">
|
<div class="col-lg-4" style="padding-right: 0;"><label>视频信息 </label></div>
|
<div class="col-lg-8"><input type="text" readonly class="form-control videoinfo" /></div>
|
<input type="hidden" id="videoid" />
|
</div>
|
<div class="col-lg-1 clear_left_right" style="padding-left: 0;">
|
<input type="button" class="btn btn-info select_video" value="选择视频" data-toggle="modal" data-target="#video_select_modal" style="width：30%" />
|
</div>
|
|
<div class="col-lg-2 clear_left_right">
|
<div class="col-lg-4" style="padding-right: 0;"><label>起始时间 </label></div>
|
<div class="col-lg-8"><input type="text" id="starttime_singleplay" readonly class="form_date form-control" /></div>
|
</div>
|
<div class="col-lg-2 clear_left_right">
|
<div class="col-lg-4" style="padding-right: 0;"><label>结束时间 </label></div>
|
<div class="col-lg-8"><input type="text" id="endtime_singleplay" readonly class="form_date form-control" /></div>
|
</div>
|
|
<div class="col-lg-1">
|
<select class="form-control" id="fastdate_singleplay">
|
<option value="0">/</option>
|
<option value="1">今天</option>
|
<option value="2">昨天</option>
|
<option value="7">最近7天</option>
|
<option value="30">最近1个月</option>
|
</select>
|
</div>
|
|
<div class="col-lg-2">
|
<select class="form-control" id="detailsystem_singleplay">
|
<option value="0">全部</option>
|
<option value="42">布丸视频</option>
|
<option value="44">布丸影视大全</option>
|
<option value="43">布丸影视大全IOS</option>
|
</select>
|
</div>
|
|
<div class="col-lg-1">
|
<input type="button" class="form-control btn btn-primary" id="sure_sigleplay" value="确定" />
|
</div>
|
</form>
|
|
<div id="container_sigleplay" style="min-width:400px;height: 800px;width: 100%;"></div>
|
</div>
|
|
<div class="tab-pane fade" id="sexplay" style="background-color: #FFFFFF;">
|
<div id="container_sexplay" style="min-width:400px;height: 800px;width: 100%;"></div>
|
</div>
|
|
<div class="tab-pane fade" id="ageplay" style="background-color: #FFFFFF;">
|
<div id="container_ageplay" style="min-width:400px;height: 800px;width: 100%;"></div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!--
|
作者：offline
|
时间：2016-12-02
|
描述：视频选择框
|
-->
|
<div class="modal fade" id="video_select_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="height: 800px;">
|
<div class="modal-dialog">
|
<div class="modal-content">
|
<div class="modal-header">
|
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
|
<h4 class="modal-title" id="myModalLabel">视频选择</h4>
|
</div>
|
<div class="modal-body">
|
<form class="container-fluid">
|
<div class="col-lg-2"></div>
|
<div class="col-lg-1 clear_left_right">
|
<label>视频名称</label>
|
</div>
|
<div class="col-lg-3">
|
<input type="text" class="form-control" id="search_key" placeholder="请输入视频名称" />
|
</div>
|
<div class="col-lg-2">
|
<input type="button" value="搜索" class="btn btn-default search_video" />
|
</div>
|
<div class="col-lg-2"></div>
|
</form>
|
<div class="container-fluid" id="search_result" style="height: 500px;max-height: 800px;overflow: scroll;">
|
|
</div>
|
|
</div>
|
<div class="modal-footer">
|
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
<button type="button" class="btn btn-primary" id="sure_select_video">确定</button>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<script src="js/jquery.min.js"></script>
|
<script src="js/bootstrap.min.js"></script>
|
<script src="js/nav.js"></script>
|
<script src="layer/layer.js"></script>
|
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
|
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
|
<script src="js/shuju_play.js"></script>
|
<script src="js/bootstrap-datetimepicker.min.js"></script>
|
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
|
<script src="js/common.js"></script>
|
|
<script>
|
$(function() {
|
//填充总的播放数据
|
|
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
|
if(e.target.href.indexOf("#totalplay") > 0) {
|
if($("#container_totalplay").children().length <= 0) //加载数据
|
{
|
console.log("totalplay");
|
}
|
|
} else if(e.target.href.indexOf("#typeplay") > 0) {
|
if($("#container_typeplay").children().length <= 0) //加载数据
|
{
|
console.log("typeplay");
|
}
|
} else if(e.target.href.indexOf("#sigleplay") > 0) {
|
if($("#container_sigleplay").children().length <= 0) //加载数据
|
{
|
console.log("sigleplay");
|
}
|
} else if(e.target.href.indexOf("#sexplay") > 0) {
|
if($("#container_sexplay").children().length <= 0) //加载数据
|
{
|
console.log("sexplay");
|
}
|
} else if(e.target.href.indexOf("#ageplay") > 0) {
|
if($("#container_ageplay").children().length <= 0) //加载数据
|
{
|
console.log("ageplay");
|
}
|
}
|
});
|
|
$('.form_date').datetimepicker({
|
language: 'zh-CN',
|
format: 'yyyy-mm-dd',
|
autoclose: 1,
|
todayHighlight: 1,
|
startView: 2,
|
minView: 2,
|
forceParse: 0
|
});
|
|
$("#sure_totalplay").click(function() {
|
var index = layer.load(2, {
|
shade: false //0.1透明度的白色背景
|
});
|
$.post('api/statistics/totalplay', {
|
'startdate': $("#starttime_totalplay").val(),
|
'enddate': $("#endtime_totalplay").val(),
|
'fastdate': $("#fastdate_totalplay").val(),
|
'detailsystem': $("#detailsystem_totalplay").val()
|
}, function(data) {
|
layer.close(index);
|
doResponse(data, fillDataTotalPlay(data.data.date, data.data.count));
|
}, 'json');
|
});
|
|
$("#sure_typeplay").click(function() {
|
var index = layer.load(2, {
|
shade: false //0.1透明度的白色背景
|
});
|
$.post('api/statistics/typeplay', {
|
'startdate': $("#starttime_typeplay").val(),
|
'enddate': $("#endtime_typeplay").val(),
|
'fastdate': $("#fastdate_typeplay").val(),
|
'detailsystem': $("#detailsystem_typeplay").val()
|
}, function(data) {
|
layer.close(index);
|
doResponse(data, fillDataTypePlay(data.data.date, data.data.count));
|
}, 'json');
|
});
|
|
$("#sure_sigleplay").click(function() {
|
var index = layer.load(2, {
|
shade: false //0.1透明度的白色背景
|
});
|
$.post('api/statistics/singleplay', {
|
'startdate': $("#starttime_singleplay").val(),
|
'enddate': $("#endtime_singleplay").val(),
|
'fastdate': $("#fastdate_singleplay").val(),
|
'detailsystem': $("#detailsystem_singleplay").val(),
|
'videoid': $("#videoid").val()
|
}, function(data) {
|
layer.close(index);
|
doResponse(data,fillDataSinglePlay(data.data.date, data.data.count));
|
}, 'json');
|
});
|
|
function fillSearchResult(data) {
|
$("#search_result").empty();
|
var htmlStr = "<table><tr><td>编号</td><td>名称</td><td>封面</td><td>是否显示</td><td>选择</td></tr>";
|
|
for(var i = 0; i < data.data.length; i++) {
|
htmlStr += "<tr>";
|
htmlStr += "<td>" +
|
data.data[i].id + "</td>";
|
|
htmlStr += "<td>" +
|
data.data[i].name + "</td>";
|
|
htmlStr += "<td><img src='" +
|
data.data[i].picture + "' style='height:80%;' /></td>";
|
|
htmlStr += "<td>" +
|
data.data[i].show + "</td>";
|
|
htmlStr += "<td><input type='radio' name='radio_select' style='width:30px;height:30px;' key=" + data.data[i].name + " value=" + data.data[i].id + " class='video_radio'></td>";
|
htmlStr += "</tr>";
|
}
|
htmlStr += "</table>";
|
//console.log(htmlStr);
|
$("#search_result").html(htmlStr);
|
}
|
|
//视频选择
|
$(".search_video").click(function() {
|
var index = layer.load(2, {
|
shade: false
|
});
|
$.post('api/common/searchvideo', {
|
'key': $("#search_key").val()
|
}, function(data) {
|
layer.close(index);
|
doResponse(data, fillSearchResult(data));
|
}, 'json');
|
});
|
|
$("#sure_select_video").click(function() {
|
if($("input[name='radio_select']:checked").val() == null || $("input[name='radio_select']:checked").val().length < 2)
|
layer.msg("请选择视频");
|
else {
|
$(".videoinfo").val($("input[name='radio_select']:checked").val() + ":" + $("input[name='radio_select']:checked").attr("key"));
|
$("#videoid").val($("input[name='radio_select']:checked").val());
|
$("#video_select_modal").modal("toggle");
|
}
|
});
|
|
});
|
</script>
|
</body>
|
|
</html>
|
