EasyNVR中有对录像进行检索回放的功能,基于这个的需求,为前端添加一个日历插件,在日历上展示出所有的录像信息,用来告知用户那些日期有回放录像,那些日期不没有回放录像是很有要的。
如何实现日历插件展示出对应日期信息:
1.需要引入的控件
<script src="@@docroot/adminlte-2.3.6/plugins/moment/moment-with-locales.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="./adminlte-2.3.6/plugins/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="@@docroot/adminlte-2.3.6/plugins/daterangepicker/moment.js"></script>
<script type="text/javascript" src="@@docroot/adminlte-2.3.6/plugins/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="@@docroot/js/jquery.qrcode.min.js"></script>
<link rel="stylesheet" href="/bootstrap-datepicker-1.7.1/css/bootstrap-datepicker3.css"/>
<script src="/bootstrap-datepicker-1.7.1/js/bootstrap-datepicker.js"></script>
<script src="/bootstrap-datepicker-1.7.1/locales/bootstrap-datepicker.zh-CN.min.js"></script>
2.日历控件展示的web触发样式HTML代码
<div class="form-group pull-right">
<div class="input-group input-group-sm">
<input type="text" class="form-control date" placeholder="选择日期">
<div class="input-group-btn">
<button type="button" class="btn btn-sm btn-default" onclick="$(this).closest('.input-group').find('.date').focus()">
<i class="fa fa-calendar"></i>
</button>
</div>
</div>
</div>
3.js的格式化
$(".box.videos .date").datepicker({
language : "zh-CN",
autoclose : true,
format : "yyyy-mm-dd",
todayHighlight : false,
beforeShowDay : function(data){
var id = $(".box.videos").data("id");
if(!id) return;
var gFlags=$(".box.videos").data("gFlags")||{};
var period = data.format("yyyyMM");
if(typeof gFlags[period] == "undefined"){
$.ajax({
async : false,
url:"/query_record_monthly",
type:"get",
data:{
id:"record_"+$.cookie("portNum"),
period:period,
},
}).then(function(xx){
if(xx.code != 0){
return $.Deferred().reject();
}
gFlags[period] = xx.data.flags || "0000000000000000000000000000000";
}).fail(function(){
gFlags[period] = "0000000000000000000000000000000";
});
}
var flags = gFlags[period];
var d = data.format("dd");
var flag = flags[d - 1];
if(flag == '0'){
return {classes : "text-gray", tooltip : "没有录像", enabled : false};
} else {
return {classes : "text-green text-bold", tooltip : "有录像"};
}
}
}).datepicker("setDate",new Date()).on('changeDate', function(data){
var period = data.format('yyyymmdd')
var id = "record_"+$.cookie("portNum");
$.ajax({
url:"/query_record_daily",
type: "get",
data: {
id: id,
period: period,
},
success:function(data) {
renderVideoPage(data.data.list)
}
})
});
需要注意的是, beforeShowDay()是处理在插件加载出来之前对日历插件所做的一些样式或其他方面的更改。当我们想要看到日历展示出对应日期得信息的时候,必须在日历加载出来以前对他进行操作。由于获取日历上展示的信息都是实时的通过请求接口获得的,因此,我们需要在通过Ajax请求接口的过程中就要使用同步请求,只有我们实时获得到的数据才有必要在日历上相应的显示出来。