linan
/
dgs.bigScreen


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810
							<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>生物防控</title>
  <link href="css/common.css" rel="stylesheet">
  <link href="css/jkfx.css" rel="stylesheet">
  <link href="css/scrollBar.css" rel="stylesheet">

  <link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
  <script type="text/javascript" src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
  <script type="text/javascript" src="js/common.js"></script>
  <script type="text/javascript" src="js/api.js"></script>
  <script type="text/javascript" src="js/jsmpeg.min.js"></script>
</head>
<body>
	<div class="header-wrapper">
	  <div class="title">
	  智能化综合管理平台
	  <svg version="1.1" width="900" height='100'>
	   <polygon points="0,0 75,100 114,100 135,82 765,82 786,100 825,100 900,0" style="fill:transparent;stroke:#69F8FE;stroke-width:2"/>
		</svg>
	  </div>
	  <div class="nav-bar">
		<a class="item " href="index.html">首页</a>
		<a class="item " href="fzfx.html">生产管理</a>
		<a class="item active" href="swfk.html">生物防控</a>
		<a class="item " href="spjk.html">视频监控</a>
		<a class="item" href="hbjc.html">环保监测</a>
	  </div>
	</div>
	<div class="grid-wrapper">
	  <div class="left1">
		<div class="wrapper">
		<div class='chart-tab-t'><div class="chart-tab-title">人员出入详情</div></div>
		<div class="wrapper-content">
			  <div class="wide-border">
				
			  </div>
			  <svg version="1.1" width="37" height="25" class="wide-border-line1">
			  <g transform="translate(0.5 0.5)">
			   <polyline points="0,24.5 0,0 37,23.5 " style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
			   
			   </g>
			   
				</svg>
				<svg version="1.1" width="90" height="25" class="wide-border-line2">
			  <g transform="translate(0.5 0.5)">
			   <polyline points="90,25 65,0 25,0 -1,23.5" style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
			   </g>
				</svg>
				<svg version="1.1" width="25" height="26" class="wide-border-line3">
			 
			   <line x1="0" y1="0" x2="26" y2="24.5"style="stroke:#53BAFD;stroke-width:1"/>
			   
				</svg>
				<svg version="1.1" width="25" height="26" class="wide-border-line4">
			 
			   <line x1="0" y1="24" x2="25" y2="0"style="stroke:#53BAFD;stroke-width:1"/>
			   
				</svg>
				<div id="chart-stztzfb"></div>
			  </div>
		
		</div>
	  </div>
	  <div class="left2">
		<div class="wrapper">
		<div class='chart-tab-t'><div class="chart-tab-title">每日流动分布</div></div>
		<div class="wrapper-content">
			  <div class="wide-border">
				
			  </div>
			  <svg version="1.1" width="37" height="25" class="wide-border-line1">
			  <g transform="translate(0.5 0.5)">
			   <polyline points="0,24.5 0,0 37,23.5 " style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
			   
			   </g>
			   
				</svg>
				<svg version="1.1" width="90" height="25" class="wide-border-line2">
			  <g transform="translate(0.5 0.5)">
			   <polyline points="90,25 65,0 25,0 -1,23.5" style="fill:#0f215c;stroke:#53BAFD;stroke-width:1"/>
			   </g>
				</svg>
				<svg version="1.1" width="25" height="26" class="wide-border-line3">
			 
			   <line x1="0" y1="0" x2="26" y2="24.5"style="stroke:#53BAFD;stroke-width:1"/>
			   
				</svg>
				<svg version="1.1" width="25" height="26" class="wide-border-line4">
			 
			   <line x1="0" y1="24" x2="25" y2="0"style="stroke:#53BAFD;stroke-width:1"/>
			   
				</svg>
				<div id="chart-styyfx"></div>
			  </div>
		
			</div>
	  </div>
	  <div class="center">

		<div class="line1">
		  <div class="cont datenow">2020-05-21</div>
		  <div class="division"></div>	  
		  <div class="cont">生物防控</div>
		  <div class="division"></div>
		   <div class="cont wether"></div>
		</div>
		<div class="line3">
			<div class="msg-tab-body" id="msg-list-content">
					<div class="msg-list-content" >
					
					</div>
					
					
				</div>
				<div class="msg-detail">
					<div class="jk-img"><img src="images/default.png" id="usrImg"/></div>
					<div class="jk-info-list">
					
						<div class='jk-info-item'>姓名：<span id="username"></span></div>
						<div class='jk-info-item'>终端名称：<span id="showagent"></span></div>
						<div class='jk-info-item'>出入方式：<span id="showtype"></span></div>
						<div class='jk-info-item'>出入时间：<span id="showtime"></span></div>
					</div>
				</div>
		</div>
		
	  </div>
	  <div class="right">
			<div class="wrapper">
				<div class="tab-t" style="padding-left:50px;">
					<div class="right-tabs">
						<div class="log-tab active">视频监控</div>
						<div class="log-tab">烤箱数据</div>
					</div>
				</div>
				<div class="switch-tab-list" style="display:block">
					<div id="play-box-0" class="play-box-content"></div>
					<div id="play-box-1" class="play-box-content"></div>
				</div>
				<div class="switch-tab-list">
					
				</div>
				<!--<div class="tab-title">烤箱数据</div>-->
				
			</div>
	  </div>
	  <div class="bottom1">
		<div class="wrapper">
		<div class="tab-t"><div class="tab-title">访问统计</div></div>
		<div class="chartBlock">
			<div id='chartBottom1'>
				<div class="chartTab-t"><div class="chartTab-title">每日访问统计</div></div>
				<div id="chart-snwd"></div>
			</div>
			<div id='chartBottom2'>
				<div class="chartTab-t"><div class="chartTab-title">每周访问统计</div></div>
				<div id="chart-snsd"></div>
			</div>
			<div id='chartBottom3'>
				<div class="chartTab-t"><div class="chartTab-title">每月访问统计</div></div>
				<div id="chart-myfwtj"></div>
			</div>
		</div>
		</div>
	  </div>
	</div>
<script>
//切换右侧
$(".right-tabs .log-tab").on('click',function(){
	var i = $(this).index(".right-tabs .log-tab");
	$(".right-tabs .log-tab").removeClass("active");
	$(this).addClass("active");	
	$(".switch-tab-list").hide();
	$(".switch-tab-list").eq(i).show();
})

	var dom_stztzfb = document.getElementById("chart-stztzfb");
	var dom_styyfx = document.getElementById("chart-styyfx");
	var dom_snwd = document.getElementById("chart-snwd");
	var dom_snsd = document.getElementById("chart-snsd");
	var dom_myfwtj = document.getElementById("chart-myfwtj");
	var myChart_stztzfb = echarts.init(dom_stztzfb);
	var myChart_styyfx = echarts.init(dom_styyfx);
	var myChart_snwd = echarts.init(dom_snwd);
	var myChart_snsd = echarts.init(dom_snsd);
	var myChart_myfwtj = echarts.init(dom_myfwtj);
	var app = {};
	option_stztzfb=null,option_styyfx=null,option_snwd=null,option_snsd=null,option_myfwtj=null;
	//人员出入分布柱状图
	var moment = new Date();
	var nowHour = moment.getHours();
	var nowDate = getDate();

	var rycrUrl = "/analyse/uface/passCount";
	var data_rycr_in=[];
	var data_rycr_out=[];
	var data_rycr_legend = [];
	
	var data_mrfw_legend = []
	var times=0;
	for(var i=0;i<=nowHour;++i){
		(function (i) {
			var j = i+1;
			var rycrParam = {
				beginTime:nowDate+" "+(i<10?"0"+i:i)+":00:00",
				endTime:nowDate+" "+(j<10?"0"+j:j)+":00:00",
			};
			data_rycr_legend[i] = (i<10?"0"+i:i)+":00"+"-"+(j<10?"0"+j:j)+":00"; 
			data_mrfw_legend[i] = (i<10?"0"+i:i)+":00"
			getData(rycrUrl,rycrParam).then(res => {
				data_rycr_in[i] = res.inCount;
				data_rycr_out[i] = res.outCount;
				
				if(times==nowHour){
				//两个图，一个柱状图，一个每日访问折线图
					option_stztzfb.series[0].data = data_rycr_out;
					
					option_stztzfb.series[1].data = data_rycr_in;
					option_stztzfb.xAxis.data = data_rycr_legend;
					 myChart_stztzfb.setOption(option_stztzfb, true);
					 
					 option_snwd.series.data = data_rycr_in;
					 option_snwd.xAxis.data = data_mrfw_legend;
					 myChart_snwd.setOption(option_snwd, true);
				}
				times++;
			})
		}(i))
		
	}
	
	option_stztzfb =  {
	color:['#207bc4','#b93b6a'],
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
		
		
    },
    grid: {
        x: '3%',
        y: '13%',
        x2: '5%',
		y2: '5%',
        containLabel: true
		
    },
	legend: {
        data: ['外出人数', '进入人数'],
		icon:'circle',
		itemGap: 5,
		itemWidth:10,
		top: '2%',
		x:'center',
		textStyle:{
					
		color:'#ccf5f9',
		},
    },
    xAxis :{
            type : 'category',
            data : data_rycr_legend,
            axisTick: {
                alignWithLabel: true
            },
			axisLine: {
					show: true,
					lineStyle: {
								type: 'solid',
								color: '#4865e3',//左边线的颜色
								width:'1'//坐标线的宽度
					}
			},
			axisLabel: {
				textStyle: {
                color: '#ccf5f9',
				
				},
				
			}
			
        },
    yAxis :{
            type : 'value',
			scale: true,
			axisLine: {
					show: true,
					lineStyle: {
								type: 'solid',
								color: '#4865e3',//左边线的颜色
								width:'1'//坐标线的宽度
					}
			},
			splitLine:{
				lineStyle: {
						type: 'solid',
						color: 'rgba(72,101,227,0.7)',
						width:'1'
				}
			},
			axisLabel: {
				textStyle: {
                color: '#ccf5f9',
				
				},
				
			}
        },
	dataZoom: [{
				type: 'inside',
				start: 80,
				end: 100
			}],
    series : [
        {
            name:"外出人数",
            type:'bar',
            barWidth: '30%',
            data:data_rycr_out,
			itemStyle: {
		        normal: {
		        
				label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
								color: '#ccf5f9',
								fontSize: 12
							},
						formatter: '{c}'
						},
						
		         }
		    },
        },
		{
            name:"进入人数",
            type:'bar',
            barWidth: '30%',
            data:data_rycr_in,
			itemStyle: {
		        normal: {		
				label: {
						show: true, //开启显示
						position: 'top', //在上方显示
						textStyle: { //数值样式
								color: '#ccf5f9',
								fontSize: 12
							},
						formatter: '{c}'
						}
		         }
		    },
        }
    ]
};

///每日流动数据获取
	var data_styyfx_in=0;
	var data_styyfx_out=0;
	var styyfxParam = {
		beginTime:nowDate+" "+"00:00:00",
		endTime:nowDate+" "+(nowHour<10?"0"+nowHour:nowHour)+":00:00",
	};
	getData(rycrUrl,styyfxParam).then(res => {
		data_styyfx_in = res.inCount;
		data_styyfx_out = res.outCount;
		option_styyfx.series.data[0] = data_styyfx_in;
		option_styyfx.series.data[1] = data_styyfx_out;
		myChart_styyfx.setOption(option_styyfx, true);

	})

	//每日流动分布饼状图
	option_styyfx = {
    tooltip: {
        trigger: 'item',
        formatter: "{b}: {c} ({d}%)"
    },
	legend: {
        orient: 'vertical',
        y: 'center',    //延Y轴居中
        //x: 'right', //居右显示
		right:30,
        data: ['进入','外出'],
		textStyle:{
			color:'#fff',
			
		}
    },
    series: {
            name:'每日流动分布',
            type:'pie',
			
            center: ['35%', '55%'],
			label: {
                show: true,
                position: 'inside',
                formatter: '{d}%',	
				textStyle:{
					color:'#fff',
					fontSize:14
				},
				
            },
            data:[
                {value:data_styyfx_in, name:'进入'},
                {value:data_styyfx_out, name:'外出'},
            ]
        }
    
};
//每日访问统计折线图
option_snwd = {
    tooltip: {
        trigger: 'axis'
    },
    grid:{
            x:40,
            y:45,
            x2:40,
            y2:30,
                  
    },
    
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['08:00','09:00','10:00','11:00','12:00','13:00','14:00'],
		axisLabel:{
			color:"#fff",
		},
		axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
        },
		
    },
    yAxis: {
        type: 'value',
		name: '次数',
		axisLabel:{
			color:"#fff",
		},
		axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
        },
		splitLine:{
			lineStyle: {
                        type: 'solid',
                        color: '#1c3860',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
		},
		
    },
    series: {
            name:'每日访问统计',
            type:'line',
            data:[],
			 
        }
    
};
//每周访问统计折线图
option_snsd = {
    tooltip: {
        trigger: 'axis'
    },
	
    grid:{
            x:40,
            y:45,
            x2:40,
            y2:30,
                  
    },
   
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['06.03','06.04','06.05','06.06','06.07','06.08','06.09'],
		axisLabel:{
			color:"#fff",
		},
		
		axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
        },
		
    },
    yAxis: {
        type: 'value',
		name: '次数',
		axisLabel:{
			color:"#fff",
		},
		axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
        },
		splitLine:{
			lineStyle: {
                        type: 'solid',
                        color: '#1c3860',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
		},
		
    },
    series: [
        {
            name:'每周访问统计',
            type:'line',
			itemStyle : {
				normal : {
					lineStyle:{
						color:'#ff444c'
						}
				}
			},
            data:[90, 74, 78, 81, 85, 86, 89],
        }
    ]
};
//每月访问统计折线图
option_myfwtj = {
    tooltip: {
        trigger: 'axis'
    },
	
    grid:{
            x:40,
            y:45,
            x2:40,
            y2:30,
                  
    },
   
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月','2月','3月','4月','5月','6月','7月'],
		axisLabel:{
			color:"#fff",
		},
		
		axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
        },
		
    },
    yAxis: {
        type: 'value',
		name: '次数',
		min: function(value) {
			return value.min - 200;
		},
		max: function(value) {
			return value.max + 100;
		},
		axisLabel:{
			color:"#fff",
		},
		axisLine: {
            show: true,
			lineStyle: {
                        type: 'solid',
                        color: '#fff',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
        },
		splitLine:{
			lineStyle: {
                        type: 'solid',
                        color: '#1c3860',//左边线的颜色
                        width:'1'//坐标线的宽度
                }
		},
		
    },
    series: [
        {
            name:'每月访问统计',
            type:'line',
			itemStyle : {
				normal : {
					lineStyle:{
						color:'#ff444c'
						}
				}
			},
            data:[290, 274, 278, 281, 285, 286, 289],
        }
    ]
};

	if (option_stztzfb && typeof option_stztzfb === "object") {
		myChart_stztzfb.setOption(option_stztzfb, true);
	}
	if (option_styyfx && typeof option_styyfx === "object") {
		myChart_styyfx.setOption(option_styyfx, true);
	}
	if (option_snwd && typeof option_snwd === "object") {
		myChart_snwd.setOption(option_snwd, true);
	}
	if (option_snsd && typeof option_snsd === "object") {
		myChart_snsd.setOption(option_snsd, true);
	}
	if (option_myfwtj && typeof option_myfwtj === "object") {
		myChart_myfwtj.setOption(option_myfwtj, true);
	}
	
	//人员出入列表
	$(".msg-list-content").delegate(".msg-tab-list","click",function(event){
			console.log(event.target)
			var target = $(event.target);
			if(target.attr("class") != "msg-tab-list"){
				target = target.parents(".msg-tab-list")
			}
			$(".msg-tab-list").removeClass("active");
			target.addClass("active");
			$("#username").text(target.find(".username").text())
			$("#showagent").text(target.find(".agent").text())
			$("#showtime").text(target.find(".finish-time").text())
			$("#showtype").text(target.find(".gotype").text())
			$("#usrImg").attr("src",target.find(".man-dothis img").attr("src"))
	})
	var pageNum = 1;
	var pageSize = 10;
	
	function getMsgList(){
		
		(function (j) {
		console.log(j)
		var msgParam = {
			pageNum:j,
			pageSize:pageSize
		};
		var msgUrl = "/analyse/uface/todayRecord";
		getData(msgUrl,msgParam).then(res => {
			console.log(res)
			var data = res.content==undefined?[]:res.content;
			var len = data.length;
			var html = "";
			var className = '';
			for (var i = 0; i < len; ++i) {
				className = data[i].device.meta.direction == 'in' ? ' msg-tab-list-in' : ' msg-tab-list-out'
				html += `<div class="msg-tab-list ${className}">`;
				html += `<div class="man-dothis"><img src="http://dgs.ifarmcloud.com/dgs-picture/${data[i].member.imgUrl}" /></div>`;
				html += `<div class="this-content"><span class="finish-time">${data[i].record.time}</span><span class="username">${data[i].member.name}</span>`;
				html += `从<span class="agent">${data[i].device.description}</span><span class="gotype">${data[i].device.meta.direction == 'in' ? '进入' : '外出'}</span></div></div>`;
			}
			if(len>0){
				pageNum = j+1;
			}
			$(".msg-list-content").append(html);
		})
		}(pageNum))
	}
	getMsgList()
	var docuT = document.getElementById("msg-list-content")
	docuT.onscroll = function() {
			var clientH = docuT.clientHeight;
            var scrollT = docuT.scrollTop;
            var wholeH = docuT.scrollHeight;
            if (clientH + scrollT >= wholeH) {
				console.log("下一页")
                getMsgList();
            }
	}
	
	//固定视频
	if(player1!=null){
	///console.log(player)
		player1.stop();
		player1.destroy();
		player1=null;
	}
	if(player2!=null){
		///console.log(player)
		player2.stop();
		player2.destroy();
		player2=null;
	}
	var player1=null;
	var player2=null;
	var videoArr = [
	["rtsp://admin:admin123@192.168.1.17:554/cam/realmonitor?channel=1&subtype=0","rtsp://admin:admin123@192.168.1.17:554/cam/realmonitor?channel=1&subtype=1"],
	["rtsp://admin:admin123@192.168.1.181:554/cam/realmonitor?channel=1&subtype=0","rtsp://admin:admin123@192.168.1.181:554/cam/realmonitor?channel=1&subtype=1"]]
	
	$(function(){
		console.log(sessionStorage.getItem("currIp"),sessionStorage.getItem("loginIp"))
		currIp = currIp?currIp:sessionStorage.getItem("currIp")
		loginIp = loginIp?loginIp:sessionStorage.getItem("loginIp")
		lanIp = lanIp?lanIp:sessionStorage.getItem("lanIp")
		console.log(currIp,loginIp)
			if(currIp==loginIp){
			//登录IP和设备IP一致
				videoIp = lanIp
				for(var i=0;i<videoArr.length;++i){
					if(i==0){
						setTimeout(function() {
						player1 = play(0,videoArr[0][0],"1366x768")
						},1000)
					}else{
						setTimeout(function() {
						player2 = play(1,videoArr[1][0],"1366x768")
						},2000)
						
					}
				}
			
			
			
			
			}else{
					//用普清
			videoIp = currIp;
				for(var i=0;i<videoArr.length;++i){
					if(i==0){
						setTimeout(function() {
						player1 = play(0,videoArr[0][1],"640x480")
						},1000)
					}else{
						setTimeout(function() {
						player2 = play(1,videoArr[1][1],"640x480")
						},2000)
						
					}
				}		
			}
		

		
					
	})
</script>
<script src="js/scrollBar.js" type="text/javascript"></script>
<script>
	/*$('.msg-list-content').scrollBar({
    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
    wheelDis: 24 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
})*/
$('.tab-videoes').scrollBar({
    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
    wheelDis: 24 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
})
$('#tab-area1 .pc-nums').scrollBar({
    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
    wheelDis: 24 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
})
$('#tab-area2 .select-list').scrollBar({
    barWidth: 5, //滚动条的宽度(这里根据需要写数值即可，不设置是10,即默认10px)
    position: "y", //写“x”代表只出水平滚动条，写“y”表示只出垂直滚动条，写“x,y”则出水平和垂直滚动条（只有在内容超出容器时才出现滚动条）
    wheelDis: 24 //滚轮滚动一次向下或向上滚动的距离，默认是15，可根据需要修改数值
})
</script>	
<script src="js/jkfx.js" type="text/javascript"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
    $('.datetimePicker').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1,
		format: 'yyyy-mm-dd hh:ii',
		pickerPosition: "bottom-left"
    });
</script>
</body>
</html>