control.html 13 KB
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css"/>
		<link rel="stylesheet" href="../../css/jquery-ui.min.css">
		<style type="text/css">
			body{
				margin: 8px;
			}
			.leftBox{
				float: left;
				margin-right: 20px;
			}
			.rightBox{
				float: left;
				font-size: 0;
				    -webkit-text-size-adjust:none;
			}
			object{
				width: 874px;
                height: 640px;
                background: #333333;
			}
			.publicBtn{
				border: 1px solid #e9e9e9;
				display: inline-block;
				width: 44px;
				height: 44px;
				line-height: 40px;
				text-align: center;
				margin-bottom: 6px;
				font-size: 24px;
				cursor: pointer;
			}
			.btn{
				margin-right: 6px;
			}
            .publicBtn span{
                width: 44px;
                height: 44px;
                display: inline-block;
                cursor: pointer;
            }
            .publicBtn span:hover{
                cursor: pointer;
            }
			.leftControlBox{
				width: 156px;
				float: left;
				margin-right: 14px;
			}
			.preBtn{
				border-right:1px dotted #e9e9e9 ;
			}
			.afterBtn{
				border-left: none;
			}
			.rightControlBox{
				width: 120px;
				float: left;
			}
			.ulBox{
				border: 1px solid #e9e9e9;
				width: 250px;
				height: 400px;
				overflow-y: auto;
				font-size: 16px;
				color: #333333
			}
			.liBox{
				height: 48px;
				line-height: 48px;
				padding: 0 10px;
				cursor: pointer;
			}
			.btnBox{
				visibility: hidden;
			}
			.liBox:hover .btnBox{
				background: #EEEEEE;
				visibility:visible;
			}
			.liBox:hover{
				background: #EEEEEE;
			}
			.num{
				display: inline-block;
				width: 34px;
				margin-right: 10px;
			}
			.name{
				display: inline-block;
				width: 94px;
			}
			.iconBtn{
				margin-right: 8px;
				cursor: pointer;
			}
			.iconBtn:nth-last-child(1){
				margin-right: 0;
			}
			.iconBtn:nth-last-child(3){
				transform: rotate(60deg);
				-webkit-transform:rotate(60deg);
				display: inline-block;
			}
			#slider{
				width: 70%;
				float: left;
				margin-right: 5%;
				margin-top: 4px;
				background: #E9E9E9;
			}
			  #slider .ui-slider-range { background: #ef2929; }
			    #slider .ui-slider-handle { border-color: #E9E9E9; background:#FFFFFF ;border-radius:8px ;}
			.numInput{
				width: 10%;
				float: left;
			}
			.issetting{
				background: rgba(31,188,247,.24);
			}
		</style>
	</head>
	<body>
		<div class="leftBox">
            <object id="videoOcxObject" classid="clsid:6DB8BA69-B5F2-47CF-9F5D-A8019A758F83" data-version="1.1.19.0"></object>
		</div>
		<div class="rightBox">
			<div style="overflow: hidden;margin-bottom: 12px;">
				<div class="leftControlBox">
					<span class="publicBtn btn"><span class="iconfont icon-zuoshangjiantou" onclick="ytControl('upleft')"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-shangjiantou" onclick="ytControl('up')"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-youshangjiantou" onclick="ytControl('upright')"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-shangjiantou-copy" onclick="ytControl('left')"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-f14" id="turnyt" data-id="1"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-shangjiantou1" onclick="ytControl('right')"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-zuoxiajiantou" onclick="ytControl('downleft')"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-right" onclick="ytControl('down')"></span></span>
					<span class="publicBtn btn"><span class="iconfont icon-youxiajiantou" onclick="ytControl('downright')"></span></span>
				</div>
				<div class="rightControlBox">
					<span class="publicBtn preBtn"><span class="iconfont icon-suoxiao"  onclick="ytControl('zoomIn')"></span></span>
					<span class="publicBtn afterBtn"><span class="iconfont icon-fangda"  onclick="ytControl('zoomOut')"></span></span>
					<span class="publicBtn preBtn"><span class="iconfont icon-qianjingsebaise-" onclick="ytControl('foucsIn')"></span></span>
					<span class="publicBtn afterBtn"><span class="iconfont icon-qianjingseheise-"  onclick="ytControl('foucsOut')"></span></span>
					<span class="publicBtn preBtn"><span class="iconfont icon-guangquan"  onclick="ytControl('apertureIn')"></span></span>
					<span class="publicBtn afterBtn"><span class="iconfont icon-guangquan1"  onclick="ytControl('apertureOut')"></span></span>
				</div>
			</div>
			<div style="margin-bottom: 20px;font-size: 12px;">
				<div id="slider"></div>
				<input type="text" class="numInput">
				<div style="clear: both;"></div>
			</div>
			<div class="ulBox">
				<div class="liBox"><span class="num">1</span><span class="name">预设点1</span>
					<span class="btnBox">
						<span class="iconfont icon-wanjiantou- iconBtn resetyzw"></span><span class="iconfont icon-shezhi iconBtn setyzw"></span><span class="iconfont icon-close-blod iconBtn delyzw"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">2</span><span class="name">预设点2</span>
					<span class="btnBox">
							<span class="iconfont icon-wanjiantou- iconBtn resetyzw"></span><span class="iconfont icon-shezhi iconBtn setyzw"></span><span class="iconfont icon-close-blod iconBtn delyzw"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">3</span><span class="name">预设点3</span>
					<span class="btnBox">
							<span class="iconfont icon-wanjiantou- iconBtn resetyzw"></span><span class="iconfont icon-shezhi iconBtn setyzw"></span><span class="iconfont icon-close-blod iconBtn delyzw"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">4</span><span class="name">预设点4</span>
					<span class="btnBox">
							<span class="iconfont icon-wanjiantou- iconBtn resetyzw"></span><span class="iconfont icon-shezhi iconBtn setyzw"></span><span class="iconfont icon-close-blod iconBtn delyzw"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">5</span><span class="name">预设点5</span>
					<span class="btnBox">
							<span class="iconfont icon-wanjiantou- iconBtn resetyzw"></span><span class="iconfont icon-shezhi iconBtn setyzw"></span><span class="iconfont icon-close-blod iconBtn delyzw"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">6</span><span class="name">预设点6</span>
					<span class="btnBox">
							<span class="iconfont icon-wanjiantou- iconBtn resetyzw"></span><span class="iconfont icon-shezhi iconBtn setyzw"></span><span class="iconfont icon-close-blod iconBtn delyzw"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">7</span><span class="name">预设点7</span>
					<span class="btnBox">
							<span class="iconfont icon-wanjiantou- iconBtn resetyzw"></span><span class="iconfont icon-shezhi iconBtn setyzw"></span><span class="iconfont icon-close-blod iconBtn delyzw"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">8</span><span class="name">预设点8</span>
					<span class="btnBox">
							<span class="iconfont icon-wanjiantou- iconBtn resetyzw"></span><span class="iconfont icon-shezhi iconBtn setyzw"></span><span class="iconfont icon-close-blod iconBtn delyzw"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">9</span><span class="name">预设点9</span>
					<span class="btnBox">
							<span class="iconfont icon-wanjiantou- iconBtn resetyzw"></span><span class="iconfont icon-shezhi iconBtn setyzw"></span><span class="iconfont icon-close-blod iconBtn delyzw"></span>
					</span>
				</div>
				<div class="liBox"><span class="num">10</span><span class="name">预设点10</span>
					<span class="btnBox">
							<span class="iconfont icon-wanjiantou- iconBtn resetyzw"></span><span class="iconfont icon-shezhi iconBtn setyzw"></span><span class="iconfont icon-close-blod iconBtn delyzw"></span>
					</span>
				</div>
			</div>
		</div>
    </body>
    <script src="../../scripts/easyui/jquery.min.js"></script>
    <script src="../../scripts/easyui/jquery.easyui.min.js"></script>
    <script src="../../scripts/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../scripts/jquery-ui.min.js"></script>
    <script src="../../scripts/utilities.js"></script>
    <script type="text/javascript">
		function changeVal(){
			$('.numInput').val($( "#slider" ).slider( "value" ))
		}
		$(function(){
			$( "#slider" ).slider({
			      orientation: "horizontal",
			      range: "min",
			      max: 100,
				  min:0,
			      value: 127,
			      slide: changeVal,
			      change: changeVal
			    });
						$( "#slider" ).slider( "value", 100 );
						playVideo();
						getyzw();
        })
        function ytControl(val){
            var ip = window.location.hostname;
            var url = "http://" + ip +"/do/trafficController/ptz"
            $.ajax({
                type: "GET",
                url: url,
                data: {
                    caozuo: val,
                    s:new Date().getTime()
                },
                dataType: "json",
                error: function(jqXHR, textStatus, error) {
                    console.log(error);
                },
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                }
            });
        }
        //水平设置
        $("#turnyt").click(function(){
            var cid = $(this).attr("data-id");
            if(cid == '1') {
                ytControl('turnH');
                $(this).attr("data-id",'2');
            } else {
                ytControl('stopH');
                $(this).attr("data-id",'1');
            }
            console.log(cid)
        })
        function playVideo() {
            var videoOcxObject = document.getElementById("videoOcxObject");
            ocx = new NvrOcxController(videoOcxObject);
            ocx.init('')
            //获取当前url中ip
            var ip = window.location.hostname;
            // 			ip = "192.168.5.158";
            var videoUrl = getVideoUrl(ip);

            var channel = 1;
            ocx.playVideo(videoUrl, 1, "", ip, 1);
        }
        //获取视频的URL
        function getVideoUrl(ip) {
            return "rtsp://" + ip + ":8557/h264";
        }
				function getyzw() {

					var ip = window.location.hostname;
					var url = "http://" + ip +"/do/trafficController/presetlist"
					$.ajax({
                type: "GET",
                url: url,
                data: {
                    s:new Date().getTime()
                },
                dataType: "json",
                error: function(jqXHR, textStatus, error) {
                    console.log(error);
                },
                success: function (data, textStatus, jqXHR) {
                    console.log(data);
                    if(data.ecode == 200) {
                        $('.ulBox .liBox').removeClass("issetting")
                        var nums =  data.nums
                        $('.ulBox .liBox').each(function(i,ele){
                            var index = $(ele).find('.num').html();
                            for(var i = 0; i < nums.length; i++) {
                                if(nums[i] == index){
                                    $(ele).addClass("issetting")
                                }
                            }
                        })
                    } else {
                        console.log("获取预置位列表失败!")
                    }

                }
            });
				}

				function setyzw(data,type) {
					var ip = window.location.hostname;
					var url = "http://" + ip +"/do/trafficController/preset"
					$.ajax({
                            type: "get",
                            url: url,
                            data: data,
                            dataType: "json",
                            error: function(jqXHR, textStatus, error) {
                                console.log(error);
                            },
                            success: function (data, textStatus, jqXHR) {
                                                if(data.ecode == 200) {
                                                    if(type != 'reset') {
                                                        getyzw()
                                                    }
                                                }
                            }
                        });
				}
				$('.resetyzw').click(function(){
					var index = $(this).parents(".liBox").find('.num').html();
					var data = {
						"num":Number(index),
						"caozuo":"goto"
					}
					setyzw(data,'reset')
				})
				$('.setyzw').click(function(){
					var index = $(this).parents(".liBox").find('.num').html();
					var data = {
						"num":index,
						"caozuo":"set"
					}
					setyzw(data,'set')
				})
				$('.delyzw').click(function(){
					var index = $(this).parents(".liBox").find('.num').html();
					var data = {
						"num":index,
						"caozuo":"clean"
					}
					setyzw(data,'del')
				})
	</script>
</html>