You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1579 lines
51 KiB
1579 lines
51 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<script type="text/javascript" src="./jquery.min.js"></script>
|
|
<script type="text/javascript" src="./echarts.min.js"></script>
|
|
<script type="text/javascript" src="./gsap.min.js"></script>
|
|
</head>
|
|
<style>
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
background-color: rgb(9, 9, 24);
|
|
color: #fff;
|
|
overflow: hidden;
|
|
font-family: Helvetica Neue, Helvetica, PingFang SC, Heiti SC, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif, Arial, sans-serif;
|
|
font-size: 17px;
|
|
margin-left: 2px;
|
|
}
|
|
|
|
.shipin9-1 span {
|
|
position: absolute;
|
|
left: 3%;
|
|
top: 3px;
|
|
z-index: 99;
|
|
}
|
|
|
|
.biankuang_top {
|
|
padding: 24px 0 10px 24px;
|
|
height: 440px;
|
|
}
|
|
.biankuang_bottom{
|
|
padding: 5px 0 10px 24px;
|
|
}
|
|
|
|
.biankaung {
|
|
width: 1854px;
|
|
height: 894px;
|
|
border: 1px solid #006685;
|
|
background: linear-gradient(to right,rgba(31,45,50,1),rgba(11,19,24,1))
|
|
}
|
|
|
|
.biankaung_content{
|
|
width: 100%;
|
|
height: 854px;
|
|
display: flex;
|
|
}
|
|
.left_biankaung_content{
|
|
width: 62%;
|
|
height: 100%;
|
|
}
|
|
|
|
.right_biankaung_content{
|
|
width: 38%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.top_title {
|
|
color: #40E5F0;
|
|
position: relative;
|
|
top: -5px;
|
|
left: 10px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.top_left {
|
|
height: 425px;
|
|
float: left;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.table_div_top {
|
|
width: 580px;
|
|
height: 350px;
|
|
margin-top: 40px;
|
|
overflow-y: scroll;
|
|
display: inline-block;
|
|
float: left;
|
|
}
|
|
|
|
.table_div_top::-webkit-scrollbar {
|
|
display: none
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
height: 20px;
|
|
/* padding: 0; */
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
border: 1px solid #41476B;
|
|
color: #B0BDD4;
|
|
}
|
|
|
|
td {
|
|
/* width:30%; */
|
|
height: 48px;
|
|
text-align: center;
|
|
border: 1px solid #41476B;
|
|
padding: 5px 0;
|
|
font-size: 19px;
|
|
}
|
|
|
|
.th td {
|
|
font-size: 20px;
|
|
background-color: #172533;
|
|
border: 1px solid #41476B;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.color {
|
|
background-color: #1F2F3E;
|
|
}
|
|
|
|
.color1 {
|
|
background-color: #172533;
|
|
}
|
|
|
|
.top_left2 {
|
|
float: left;
|
|
width: 460px;
|
|
height: 250px;
|
|
/* border: 1px solid red; */
|
|
margin-top: 50px;
|
|
margin-left: 30px;
|
|
}
|
|
.top_left3{
|
|
float: left;
|
|
width: 100%;
|
|
height: 330px;
|
|
position: relative;
|
|
margin-top: 20px;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.top {
|
|
width: 80%;
|
|
/* display: inline-block; */
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.left {
|
|
width: 30%;
|
|
/* display: inline-block; */
|
|
float: left;
|
|
line-height: 35px;
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.right {
|
|
width: 55%;
|
|
height: 35px;
|
|
border: 1px solid #41476B;
|
|
;
|
|
/* display: inline-block; */
|
|
/* float: left;
|
|
text-align: center; */
|
|
line-height: 35px;
|
|
background-color: #172533;
|
|
/* overflow: hidden; */
|
|
margin-left: 116px;
|
|
}
|
|
|
|
input {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #172533;
|
|
outline: none;
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
text-align: left;
|
|
padding: 0px;
|
|
position: relative;
|
|
}
|
|
|
|
input[type="time"]::-webkit-calendar-picker-indicator{
|
|
background-image: url('./img/DataTime1.png');
|
|
position: absolute;
|
|
right: 0;
|
|
padding-left: calc(100% - 40px);
|
|
padding-right: 5px;
|
|
}
|
|
input[type="time"]::-webkit-datetime-edit-fields-wrapper{
|
|
margin-left: 20px;
|
|
}
|
|
|
|
input[type="time"]::-webkit-datetime-edit-text{
|
|
margin-left: 12px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.select_piao3 {
|
|
width: 100%;
|
|
height: 35px;
|
|
background-color: #1F2F3E;
|
|
color: #fff;
|
|
border: none;
|
|
text-align: center;
|
|
position: relative;
|
|
font-size: 19px;
|
|
overflow: none;
|
|
}
|
|
|
|
.btn {
|
|
width: 90px;
|
|
height: 40px;
|
|
text-align: center;
|
|
color: #fff;
|
|
line-height: 40px;
|
|
/* border: 1px solid rgb(57, 129, 141); */
|
|
/* background-color: rgb(57, 129, 141); */
|
|
/* margin: 0 auto; */
|
|
border-radius: 5px;
|
|
display: inline-block;
|
|
margin-left: 3%;
|
|
}
|
|
|
|
.point {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.music_tanchuang {
|
|
position: absolute;
|
|
top: 16%;
|
|
left: 25%;
|
|
width: 800px;
|
|
height: 600px;
|
|
padding: 24px;
|
|
background-color: rgb(9, 9, 24);
|
|
border: 1px solid #006685;
|
|
display: none;
|
|
}
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.btn1 {
|
|
width: 80px;
|
|
height: 40px;
|
|
text-align: center;
|
|
color: #fff;
|
|
line-height: 40px;
|
|
background-color: rgb(57, 129, 141);
|
|
margin: 0 auto;
|
|
border-radius: 5px;
|
|
position: relative;
|
|
top: -2%;
|
|
left: 44%;
|
|
}
|
|
.BiaoTitle{
|
|
position: relative;
|
|
}
|
|
.XianBig{
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 128px;
|
|
}
|
|
.XianSmall{
|
|
position: absolute;
|
|
top: 10px;
|
|
margin-left: 18px;
|
|
}
|
|
.JianTou{
|
|
position: absolute;
|
|
right: 20px;
|
|
}
|
|
.TuPian{
|
|
margin-right: 14px;
|
|
}
|
|
.TuPian:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.range{
|
|
position: absolute;
|
|
left: 90px;
|
|
top: 4px;
|
|
height: 6px;
|
|
width: 46px;
|
|
display: none;
|
|
transform: rotateZ(0deg);
|
|
display: none;
|
|
}
|
|
|
|
.ShenBoImage1{
|
|
position: absolute;
|
|
width: 3%;
|
|
}
|
|
|
|
.ShenBoImage2{
|
|
position: absolute;
|
|
width: 3%;
|
|
display: none;
|
|
}
|
|
.ZhuanTai{
|
|
display: flex;
|
|
position: absolute;
|
|
width: 290px;
|
|
top: 20px;
|
|
}
|
|
.ZhuanTai >span{
|
|
position: absolute;
|
|
left: 100px;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
}
|
|
.ZhuanTai1{
|
|
left: 400px;
|
|
}
|
|
.ZhuanTai2{
|
|
top: 170px;
|
|
}
|
|
.ZhuanTai3{
|
|
left: 400px;
|
|
top: 170px;
|
|
}
|
|
.ZhuanTai4{
|
|
right: 65px;
|
|
}
|
|
.ZhuanTai5{
|
|
right: 65px;
|
|
top: 170px;
|
|
}
|
|
|
|
.ZhuanTai4 >span{
|
|
left: 100px !important;
|
|
font-size: 20px !important;
|
|
}
|
|
.bingtubei{
|
|
width: 230px;
|
|
position: absolute;
|
|
left: 5px;
|
|
height: 25px;
|
|
}
|
|
.bingtubei1{
|
|
top: 3px;
|
|
}
|
|
|
|
.bingtubei2{
|
|
top: 32px;
|
|
}
|
|
.SheBeiName{
|
|
top: 6px;
|
|
}
|
|
.SheBeiState{
|
|
top: 48px;
|
|
}
|
|
.SheBeiState>span{
|
|
display: inline-block;
|
|
}
|
|
.Camerabei{
|
|
position: absolute;
|
|
left: 5px;
|
|
}
|
|
|
|
.Camerabei1{
|
|
top: 3px;
|
|
}
|
|
.Camerabei2{
|
|
top: 45px;
|
|
}
|
|
.cameraState{
|
|
top: 48px;
|
|
}
|
|
|
|
.XianJiMianBan{
|
|
width: 100%;
|
|
height: 499px;
|
|
background-color: #172533;
|
|
position: relative;
|
|
}
|
|
.XianJiKonZhi{
|
|
height: 468px;
|
|
width: 330px;
|
|
background-color: #202F3E;
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 15px;
|
|
}
|
|
.facility_control{
|
|
width: 408px;
|
|
height: 738px;
|
|
background: rgba(31, 46, 61, 1);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
margin-top: 10px;
|
|
}
|
|
.Controls{
|
|
height: 250px;
|
|
}
|
|
.Controls>img{
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.Controls_bg1{
|
|
top: 24px;
|
|
}
|
|
.Controls_bg2{
|
|
top: 15px;
|
|
}
|
|
.Controls_bg3{
|
|
top: 90px;
|
|
}
|
|
.Controls_bg4{
|
|
top: 108px;
|
|
}
|
|
|
|
.Controls_icon{
|
|
z-index: 5;
|
|
}
|
|
|
|
.Controls_icon:hover{
|
|
cursor: pointer;
|
|
}
|
|
.Controls_icon1{
|
|
top: 30px;
|
|
}
|
|
.Controls_icon2{
|
|
left: 152px !important;
|
|
top: 58px;
|
|
}
|
|
.Controls_icon3{
|
|
left: 120px !important;
|
|
top: 108px;
|
|
}
|
|
.Controls_icon4{
|
|
left: 152px !important;
|
|
top: 166px;
|
|
}
|
|
.Controls_icon5{
|
|
top: 196px;
|
|
}
|
|
.Controls_icon6{
|
|
left: 256px !important;
|
|
top: 166px;
|
|
}
|
|
.Controls_icon7{
|
|
left: 284px !important;
|
|
top: 108px;
|
|
}
|
|
.Controls_icon8{
|
|
top: 58px;
|
|
left: 256px !important;
|
|
}
|
|
|
|
.control_btn{
|
|
width: 100%;
|
|
position: relative;
|
|
margin-top: 12px;
|
|
}
|
|
.control_btn>span{
|
|
display: inline-block;
|
|
position: absolute;
|
|
}
|
|
.square_small{
|
|
display: inline-block;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: rgba(39,83,97,1);
|
|
border: 1px solid rgb(64, 229, 240);
|
|
text-align: center;
|
|
line-height: 30px;
|
|
}
|
|
.Zoom{
|
|
left: 60px;
|
|
}
|
|
.Location{
|
|
left: 138px;
|
|
}
|
|
|
|
.subtract_left{
|
|
position: absolute;
|
|
right: 45px;
|
|
top: 5px;
|
|
}
|
|
|
|
.subtract_left:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add_right{
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 5px;
|
|
}
|
|
|
|
.add_right:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.camera_speed{
|
|
top: 4px !important;
|
|
left: 84px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.rotate_speed{
|
|
width: 125px;
|
|
height: 24px;
|
|
background: rgba(39,83,97,1);
|
|
border: 1px solid rgb(64, 229, 240);
|
|
right: 60px;
|
|
font-size: 14px;
|
|
color: #40E5F0;
|
|
}
|
|
.rotate_speed>span{
|
|
display: inline-block;
|
|
margin-left: 5px;
|
|
position: absolute;
|
|
top: 2px;
|
|
}
|
|
|
|
.presetting_list{
|
|
height: 300px;
|
|
width: 358px;
|
|
margin-top: 80px;
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.list_title{
|
|
color:#B3B3B3 ;
|
|
font-size: 14px;
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.list_content{
|
|
height: 330px;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.list_content::-webkit-scrollbar{
|
|
background-color: rgba(0,0,0,0);
|
|
width: 5px;
|
|
}
|
|
|
|
.list_content::-webkit-scrollbar-thumb{
|
|
background-color: #40455A;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.list_content>ul{
|
|
list-style: none;
|
|
padding: 0 0 0 15px;
|
|
}
|
|
.list_content>ul>li{
|
|
height: 55px;
|
|
font-size: 19px;
|
|
color: #E7F5F6;
|
|
position: relative;
|
|
}
|
|
.sheng_bo_img{
|
|
position: absolute;
|
|
top: 3px;
|
|
width: 18px;
|
|
}
|
|
.local_name{
|
|
margin-left: 24px;
|
|
width: 200px;
|
|
display: inline-block;
|
|
}
|
|
.caozuo{
|
|
color:#40E5F0 ;
|
|
}
|
|
|
|
.caozuo:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.StateContent{
|
|
color: #EB5757;
|
|
font-size: 22px;
|
|
position: absolute;
|
|
top: -2px;
|
|
width: 50px;
|
|
left: 35px;
|
|
}
|
|
.time_screening{
|
|
width: 74%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
height: 20px;
|
|
margin-left: 2px;
|
|
}
|
|
.time_screening div{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
}
|
|
.radio_text{
|
|
margin-left: 4px;
|
|
}
|
|
input[type='radio']{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.time_shezhi{
|
|
width: 110%;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
margin-left: 4px;
|
|
margin-top: 26px;
|
|
}
|
|
/* .radioXuan{
|
|
margin-left: 6px;
|
|
} */
|
|
.radioXuan>div{
|
|
display: flex;
|
|
align-items: center;
|
|
float: left;
|
|
}
|
|
.everyDay{
|
|
margin-left: 15px;
|
|
}
|
|
.round-robin{
|
|
font-size: 19px;
|
|
width: 230px;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<div class="biankaung">
|
|
<div class="shipin9-1">
|
|
<span style="font-size: 22px; font-weight: 500;">智能驱鸟系统</span>
|
|
<img src="./img/title.png" alt="" srcset="" width="100%" height="35px">
|
|
</div>
|
|
<div class="biankaung_content">
|
|
<div class="left_biankaung_content">
|
|
<div class="biankuang_top">
|
|
<div class="BiaoTitle">
|
|
<img src="./img/left_yuan.png">
|
|
<span class="top_title">设备详情</span>
|
|
<img src="./img/XianBig.png" alt="" class="XianBig">
|
|
<img src="./img/JianTou.png" alt="" class="JianTou">
|
|
</div>
|
|
<div class="top_left">
|
|
<div class="table_div_top">
|
|
<table id="list">
|
|
</table>
|
|
</div>
|
|
<div class="top_left2">
|
|
<div class="time_screening">
|
|
<div><span style="font-size: 20px;font-weight: bold;">循环方式：</span></div>
|
|
<div class="round-robin">
|
|
<div><input type="radio" class="day_radio" name="gender" value="day"><span class="radio_text">每天</span></div>
|
|
<div><input type="radio" class="week_radio" name="gender" value="week"><span class="radio_text">每周</span></div>
|
|
<div><input type="radio" class="month_radio" name="gender" value="month"><span class="radio_text">每月</span></div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="time_shezhi">
|
|
<div><span style="font-size: 20px;font-weight: bold;">循环设置：</span></div>
|
|
<div class="round-robin radioXuan">
|
|
<!-- <div><span class="everyDay">每天</span></div> -->
|
|
</div>
|
|
|
|
<!-- <div><input type="radio" class="week_radio" name="gender" value="week"><span class="radio_text">每周</span></div>
|
|
<div><input type="radio" class="month_radio" name="gender" value="month"><span class="radio_text">每月</span></div> -->
|
|
</div>
|
|
<div class="top">
|
|
<div class="left">开始时间：</div>
|
|
<div class="right"><input type="time" step="1" id="Start"></div>
|
|
</div>
|
|
<div class="top">
|
|
<div class="left">结束时间：</div>
|
|
<div class="right"><input type="time" step="1" id="endTime" min="12:00:00"></div>
|
|
</div>
|
|
<div class="top">
|
|
<div class="left">选择设备：</div>
|
|
<div class="right state">
|
|
<select class="select_piao3 point"></select>
|
|
</div>
|
|
</div>
|
|
<div class="top">
|
|
<div class="left">定时播放：</div>
|
|
<div style="float: left;width: 220px;">
|
|
<div class="btn" onclick="StartBoFang()">
|
|
<img src="./img/kaishi.png" class="point" alt="" srcset="">
|
|
</div>
|
|
<div class="btn" style="margin-left: 9%;">
|
|
<img src="./img/jieshu.png" class="point" alt="" srcset="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="biankuang_bottom">
|
|
<div class="BiaoTitle">
|
|
<img src="./img/left_yuan.png">
|
|
<span class="top_title">设备状态</span>
|
|
<img src="./img/XianBig.png" alt="" class="XianBig">
|
|
<img src="./img/JianTou.png" alt="" class="JianTou">
|
|
</div>
|
|
<div class="top_left3">
|
|
<div class="top_left3_top">
|
|
<div class="ZhuanTai">
|
|
<span class="SheBeiName">定向声波驱鸟装置1</span>
|
|
<span class="SheBeiState"><span class="SheBeiState1"><img src="./img/ZhenChan.png" style="position: absolute;top: 2px;"><span class="StateContent">正常</span></span></span>
|
|
<div>
|
|
<img src="./img/SheBei.png">
|
|
</div>
|
|
<div style="position: relative; width: 175px;">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei1">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei2" >
|
|
</div>
|
|
</div>
|
|
<div class="ZhuanTai ZhuanTai1">
|
|
<span class="SheBeiName">定向声波驱鸟装置2</span>
|
|
<span class="SheBeiState"><span class="SheBeiState2"><img src="./img/ZhenChan.png" style="position: absolute;top: 2px;"><span class="StateContent">正常</span></span></span>
|
|
<div>
|
|
<img src="./img/SheBei.png">
|
|
</div>
|
|
<div style="position: relative; width: 175px;">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei1">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei2" >
|
|
</div>
|
|
</div>
|
|
<div class="ZhuanTai ZhuanTai2">
|
|
<span class="SheBeiName">定向声波驱鸟装置3</span>
|
|
<span class="SheBeiState"><span class="SheBeiState3"><img src="./img/ZhenChan.png" style="position: absolute;top:2px;"><span class="StateContent">正常</span></span></span>
|
|
<div>
|
|
<img src="./img/SheBei.png">
|
|
</div>
|
|
<div style="position: relative; width: 175px;">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei1">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei2" >
|
|
</div>
|
|
</div>
|
|
<div class="ZhuanTai ZhuanTai3">
|
|
<span class="SheBeiName">定向声波驱鸟装置4</span>
|
|
<span class="SheBeiState"><span class="SheBeiState4"><img src="./img/ZhenChan.png" style="position: absolute;top: 2px;"><span class="StateContent">正常</span></span></span>
|
|
<div>
|
|
<img src="./img/SheBei.png">
|
|
</div>
|
|
<div style="position: relative; width: 175px;">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei1">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei2" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="top_left3_bottom">
|
|
<div class="ZhuanTai ZhuanTai4">
|
|
<span class="SheBeiName cameraName" >驱鸟双目相机可见光</span>
|
|
<span class="SheBeiState cameraState"><span class="cameraState1"><img src="./img/ZhenChan.png" style="position: absolute;top: 2px;"><span class="StateContent">正常</span></span></span>
|
|
<div>
|
|
<img src="./img/Camera.png">
|
|
</div>
|
|
<div style="position: relative; width: 175px;">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei1">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei2" >
|
|
</div>
|
|
</div>
|
|
<div class="ZhuanTai ZhuanTai5">
|
|
<span class="SheBeiName cameraName" >驱鸟双目相机红外</span>
|
|
<span class="SheBeiState cameraState"><span class="cameraState1"><img src="./img/ZhenChan.png" style="position: absolute;top: 2px;"><span class="StateContent">正常</span></span></span>
|
|
<div>
|
|
<img src="./img/Camera.png">
|
|
</div>
|
|
<div style="position: relative; width: 175px;">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei1">
|
|
<img src="./img/cameraBei.png" class="Camerabei Camerabei2" >
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right_biankaung_content">
|
|
<div class="biankuang_top">
|
|
|
|
<div class="BiaoTitle">
|
|
<img src="./img/left_yuan.png">
|
|
<span class="top_title">云台控制</span>
|
|
<img src="./img/XianSmall.png" alt="" class="XianSmall">
|
|
<img src="./img/JianTou.png" alt="" class="JianTou">
|
|
</div>
|
|
|
|
<div class="facility_control">
|
|
<div class="Controls">
|
|
<img src="./img/circl_small.png" class="Controls_bg1">
|
|
<img src="./img/circl_big.png" class="Controls_bg2">
|
|
<img src="./img/circl_center.png" class="Controls_bg3 ControlsXunHuan">
|
|
<img src="./img/Vector.png" class="Controls_bg4 ControlsXunHuan">
|
|
|
|
<img src="./img/1.png" class="Controls_icon Controls_icon1" >
|
|
<img src="./img/2.png" class="Controls_icon Controls_icon2">
|
|
<img src="./img/3.png" class="Controls_icon Controls_icon3">
|
|
<img src="./img/4.png" class="Controls_icon Controls_icon4">
|
|
<img src="./img/5.png" class="Controls_icon Controls_icon5">
|
|
<img src="./img/6.png" class="Controls_icon Controls_icon6">
|
|
<img src="./img/7.png" class="Controls_icon Controls_icon7">
|
|
<img src="./img/8.png" class="Controls_icon Controls_icon8">
|
|
</div>
|
|
|
|
<div class="control_btn">
|
|
<span class="Zoom">
|
|
<span class="square_small square_small1">
|
|
<img src="./img/maginfy.png" class="square_small1">
|
|
</span>
|
|
<span class="square_small square_small2" style="margin-left: -5px;">
|
|
<img src="./img/reduce.png" class="square_small2">
|
|
</span>
|
|
</span>
|
|
<span class="Location">
|
|
<span class="square_small square_small3">
|
|
<img src="./img/location_right.png" class="square_small3">
|
|
</span>
|
|
<span class="square_small square_small4" style="margin-left: -5px;">
|
|
<img src="./img/location_err.png" class="square_small4">
|
|
</span>
|
|
</span>
|
|
|
|
<span class="rotate_speed">
|
|
<span>镜头转速</span>
|
|
<img src="./img/to_left.png" class="subtract_left">
|
|
<span class="camera_speed">5</span>
|
|
<img src="./img/to_right.png" class="add_right">
|
|
</span>
|
|
</div>
|
|
|
|
<div class="presetting_list">
|
|
<span class="list_title">预置位列表</span>
|
|
<div class="list_content">
|
|
<ul></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 曲目列表的弹窗 -->
|
|
<div class="music_tanchuang">
|
|
<div class="title">选择曲目</div>
|
|
<iframe id="draw_fence" src="./music_list.html" frameborder="0" style="width:100%;height:85%;"></iframe>
|
|
<div class="btn1 point" onclick="close_tanchuang()">取消</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
<script>
|
|
console.log(gsap)
|
|
let cameraContent={};
|
|
let leftXunHuan=0;
|
|
let yinlian_all=''
|
|
// 驱鸟设备列表接口
|
|
function selectBridDeviceList() {
|
|
$.ajax({
|
|
//请求方式
|
|
type: 'POST',
|
|
//发送请求的地址
|
|
url: 'yibin/api/brid/selectBridDeviceList',
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
//发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
|
|
data: JSON.stringify({
|
|
// id: 101
|
|
}),
|
|
success: function (result) {
|
|
console.log(result)
|
|
yinlian_all=result.rows
|
|
var str = '';
|
|
let select='';
|
|
let fenbei=''
|
|
for (var i = 0; i < result.rows.length; i++) {
|
|
if(result.rows[i].deviceStatus==1){
|
|
fenbei=result.rows[i].volume1Fb+' fb'
|
|
}else{
|
|
fenbei=''
|
|
}
|
|
|
|
if (i % 2 == 0) {
|
|
str += '<tr class="color">' +
|
|
'<td>' + Number(i + 1) + '</td>' +
|
|
'<td>' + result.rows[i].name + '</td>' +
|
|
'<td style="position:relative;width:200px">' +
|
|
'<img src="./img/bofang.png" title="播放" class="TuPian" id="'+'play'+result.rows[i].id+'" alt="" srcset="" onclick="BoFang('+result.rows[i].id+',0)">' +
|
|
'<img src="./img/zanting.png" title="暂停" class="TuPian" id="'+'ZanTing'+result.rows[i].id+'" alt="" srcset="" style="display:none" onclick="BoFang('+result.rows[i].id+',1)">'+
|
|
'<img src="./img/zhonzhi.png" title="结束" class="TuPian ZhonZhi'+result.rows[i].id+'" alt="" srcset="" onclick="ZhonZhi('+result.rows[i].id+')">' +
|
|
'<img src="./img/yinliang.png" alt="" srcset="" class="TuPian" onclick="showyinliang('+result.rows[i].id+')">' +
|
|
'<input type=range class="range'+' '+'range'+result.rows[i].id+'" value="0" max="100" min="0" step="10">'+
|
|
'<img src="./img/xunhuan(1).png" title="单曲循环" alt="" srcset="" id="'+'DanXunHuan'+result.rows[i].id+'" class="TuPian" onclick="Circulation('+result.rows[i].id+',1)">' +
|
|
'<img src="./img/xunhuan.png" title="循环" alt="" srcset="" id="'+'AllXunHuan'+result.rows[i].id+'" class="TuPian" style="display:none" onclick="Circulation('+result.rows[i].id+',0)">' +
|
|
'</td>' +
|
|
'<td class="point">'+ fenbei+'</td>' +
|
|
'<td class="point" onclick=selectMusic("' + result.rows[i].address + '")>' + result.rows[i].nowSong + '</td>' +
|
|
'</tr>'
|
|
} else {
|
|
// '<img src="./img/TongBu.png" title="同步歌曲" class="TuPian TongBu'+result.rows[i].id+'" alt="" srcset="" style="margin:0" onclick="TongBu('+result.rows[i].id+')">'
|
|
str += '<tr class="color1">' +
|
|
'<td>' + Number(i + 1) + '</td>' +
|
|
'<td>' + result.rows[i].name + '</td>' +
|
|
'<td style="position:relative;width:200px">' +
|
|
'<img src="./img/bofang.png" title="播放" class="TuPian" id="'+'play'+result.rows[i].id+'" alt="" srcset="" onclick="BoFang('+result.rows[i].id+',0)">' +
|
|
'<img src="./img/zanting.png" title="暂停" class="TuPian" id="'+'ZanTing'+result.rows[i].id+'" alt="" srcset="" style="display:none" onclick="BoFang('+result.rows[i].id+',1)">'+
|
|
'<img src="./img/zhonzhi.png" title="结束" class="TuPian ZhonZhi'+result.rows[i].id+'" alt="" srcset="" onclick="ZhonZhi('+result.rows[i].id+',2)">' +
|
|
'<img src="./img/yinliang.png" class="TuPian" alt="" srcset="" onclick="showyinliang('+result.rows[i].id+')">' +
|
|
'<input type=range class="range'+' '+'range'+result.rows[i].id+'" value="0">'+
|
|
'<img src="./img/xunhuan(1).png" title="单曲循环" alt="" srcset="" id="'+'DanXunHuan'+result.rows[i].id+'" class="TuPian" onclick="Circulation('+result.rows[i].id+',1)">' +
|
|
'<img src="./img/xunhuan.png" title="循环" alt="" srcset="" id="'+'AllXunHuan'+result.rows[i].id+'" class="TuPian" style="display:none" onclick="Circulation('+result.rows[i].id+',0)">'+
|
|
'</td>' +
|
|
'<td class="point">' +fenbei+'</td>' +
|
|
'<td class="point" onclick=selectMusic("' + result.rows[i].address + '")>' + result.rows[i].nowSong + '</td>' +
|
|
'</tr>'
|
|
}
|
|
$('.select_piao3').append(`<option value='${result.rows[i].id}-${result.rows[i].address}'>${result.rows[i].name}</option>`)
|
|
|
|
if(result.rows[i].deviceStatus==1){
|
|
$(`.SheBeiState${i+1}`).find('img').attr('src','./img/ZhenChan.png')
|
|
$(`.SheBeiState${i+1}`).find('span').attr('style','color:#35EB68;margin-left: 35px;font-size: 22px;')
|
|
$(`.SheBeiState${i+1}`).find('span').html('正常')
|
|
}else{
|
|
$(`.SheBeiState${i+1}`).find('img').attr('src','./img/YiChan.png')
|
|
$(`.SheBeiState${i+1}`).find('span').attr('style','color:#EB5757;margin-left: 35px;font-size: 22px;')
|
|
$(`.SheBeiState${i+1}`).find('span').html('异常')
|
|
}
|
|
|
|
console.log()
|
|
}
|
|
|
|
//刷新之后默认显示第一个设备的开始和结束时间
|
|
$('#list').html(
|
|
'<tr class="th">' +
|
|
'<td>序号</td>' +
|
|
'<td>设备名称</td>' +
|
|
'<td style="width:30%">操作</td>' +
|
|
'<td>设备分贝</td>' +
|
|
'<td>曲目列表</td>' +
|
|
'</tr>' +
|
|
str
|
|
)
|
|
}
|
|
})
|
|
}
|
|
selectBridDeviceList()
|
|
|
|
//获取摄像头的状态
|
|
function selectCamera(){
|
|
$.ajax({
|
|
url:'yibin/api/brid/selectBirdCameraList',
|
|
type:'POST',
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
data: JSON.stringify({
|
|
// id: 101
|
|
}),
|
|
success:function (res){
|
|
for(let i=0 ;i<res.rows.length;i++){
|
|
if(res.rows[i].cameraStatus==1){
|
|
$('.cameraState1').find('img').attr('src','./img/ZhenChan.png')
|
|
$('.cameraState1').find('span').attr('style','color:#35EB68;')
|
|
$('.cameraState1').find('span').html('正常')
|
|
}else{
|
|
$('.cameraState1').find('img').attr('src','./img/YiChan.png')
|
|
$('.cameraState1').find('span').attr('style','color:#EB5757;')
|
|
$('.cameraState1').find('span').html('异常')
|
|
}
|
|
}
|
|
|
|
cameraContent=res.rows[0]
|
|
}
|
|
})
|
|
}
|
|
|
|
selectCamera()
|
|
|
|
|
|
//预置位列表
|
|
setTimeout(()=>{
|
|
cameraPreform()
|
|
},100)
|
|
//预置位列表
|
|
function cameraPreform(){
|
|
console.log(cameraContent.code)
|
|
let result=''
|
|
// encodeURIComponent 用于将字符串编码为适用于在URL中使用的格式
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`yibin/api/brid/positionList?cameraCode=${encodeURIComponent(cameraContent.code)}`,
|
|
contentType:'application/json',
|
|
success:function(res){
|
|
if(res.code==200){
|
|
for(let i=0;i<res.rows.length;i++){
|
|
result+=`<li><img src="./img/sheng_bo.png" class="sheng_bo_img"><span class="local_name">${res.rows[i].name}</span><span class="caozuo caozuo${res.rows[i].num}">移到此角度</span></li>`
|
|
}
|
|
$($('.list_content').children()).html(result)
|
|
// $('.list_content').children()[0].html(result)
|
|
|
|
|
|
$('.caozuo').on('click',function(e){
|
|
let num=$(e.target).attr('class').split(' ')[1].slice(6)
|
|
console.log(num)
|
|
let result={
|
|
"nvrIp":"192.168.1.249",
|
|
"channel":39,
|
|
"pointNum":num
|
|
}
|
|
$.ajax({
|
|
type:'POST',
|
|
utl:'yibin/api/brid/angleJump',
|
|
contentType:'application/json',
|
|
dataType:'json',
|
|
data:JSON.stringify(result),
|
|
success:function(res){
|
|
console.log(res)
|
|
}
|
|
})
|
|
|
|
})
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
// $.ajax({
|
|
// type:'get',
|
|
// utl:'yibin/api/brid/angleJump',
|
|
// contentType:'application/json',
|
|
// dataType:'json',
|
|
// data:JSON.stringify({
|
|
// "nvrIp":"192.168.1.249",
|
|
// "channel":39,
|
|
// "pointNum":3
|
|
// }),
|
|
// success:function(res){
|
|
// console.log(res)
|
|
// }
|
|
// });
|
|
|
|
// function jumpPreform(value){
|
|
// console.log(value)
|
|
// let result={
|
|
// "nvrIp":"192.168.1.249",
|
|
// "channel":39,
|
|
// "pointNum":value
|
|
// }
|
|
// $.ajax({
|
|
// type:'POST',
|
|
// utl:'yibin/api/brid/angleJump',
|
|
// contentType:'application/json',
|
|
// dataType:'json',
|
|
// data:JSON.stringify(result),
|
|
// success:function(res){
|
|
// console.log(res)
|
|
// }
|
|
// })
|
|
// }
|
|
|
|
|
|
//上报声音的状态（暂停，开始，终止）
|
|
function ShanBao(id){
|
|
$.ajax({
|
|
type:'POST',
|
|
//请求地址
|
|
url:`yibin/api/brid/tellDeviceStatus?deviceId=${id}`,
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
|
|
success(res){
|
|
console.log(res)
|
|
}
|
|
})
|
|
}
|
|
|
|
//开始播放功能
|
|
function BoFang(id,control){
|
|
closeYinLian()
|
|
control='0'+control
|
|
$.ajax({
|
|
type:'POST',
|
|
//请求地址
|
|
url:'yibin/api/brid/musicPlay',
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
|
|
data:JSON.stringify({
|
|
"id":id,
|
|
"control":control
|
|
}),
|
|
success(res){
|
|
if(res.code==200){
|
|
if(control=="00"){
|
|
$(`#play${id}`).hide();
|
|
$(`#ZanTing${id}`).show();
|
|
BoFanSwitchSheBei(id,control)
|
|
}else{
|
|
$(`#play${id}`).show();
|
|
$(`#ZanTing${id}`).hide();
|
|
BoFanSwitchSheBei(id,control)
|
|
}
|
|
ShanBao(id)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//播放按钮切换设备的状态
|
|
function BoFanSwitchSheBei(id,control){
|
|
switch(id){
|
|
case 3:
|
|
switch(control){
|
|
case '00':
|
|
$('.topLeft1').hide()
|
|
$('.topLeft2').show()
|
|
break;
|
|
case '01':
|
|
$('.topLeft1').show()
|
|
$('.topLeft2').hide()
|
|
break;
|
|
}
|
|
break;
|
|
case 4:
|
|
switch(control){
|
|
case '00':
|
|
$('.topRight1').hide()
|
|
$('.topRight2').show()
|
|
break;
|
|
case '01':
|
|
$('.topRight1').show()
|
|
$('.topRight2').hide()
|
|
break;
|
|
}
|
|
break;
|
|
case 5:
|
|
switch(control){
|
|
case '00':
|
|
$('.bottomLeft1').hide()
|
|
$('.bottomLeft2').show()
|
|
break;
|
|
case '01':
|
|
$('.bottomLeft1').show()
|
|
$('.bottomLeft2').hide()
|
|
break;
|
|
}
|
|
break;
|
|
case 6:
|
|
switch(control){
|
|
case '00':
|
|
$('.bottomRight1').hide()
|
|
$('.bottomRight2').show()
|
|
break;
|
|
case '01':
|
|
$('.bottomRight1').show()
|
|
$('.bottomRight2').hide()
|
|
break;
|
|
}
|
|
break;
|
|
}
|
|
};
|
|
|
|
|
|
//终止功能
|
|
function ZhonZhi(id){
|
|
closeYinLian()
|
|
// console.log(createjs.Tween)
|
|
// let zhonzhi=getElementsByClassName('ZhonZhi')
|
|
// createjs.Tween.get($('.zhonzhi')).to({x: 275, y: 200},500,createjs.Ease.getPowInOut(2))
|
|
gsap.fromTo(`.ZhonZhi${id}`, { opacity: 0 }, { opacity: 1, duration: 1 });
|
|
$.ajax({
|
|
type:'POST',
|
|
//请求地址
|
|
url:' yibin/api/brid/musicPlay',
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
|
|
data:JSON.stringify({
|
|
"id":id,
|
|
"control":'02'
|
|
}),
|
|
success(res){
|
|
if(res.code==200){
|
|
$(`#play${id}`).show();
|
|
$(`#ZanTing${id}`).hide();
|
|
ShanBao(id)
|
|
ZhonZhiSwitchSheBei(id)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
function ZhonZhiSwitchSheBei(id){
|
|
switch(id){
|
|
case 3:
|
|
$('.topLeft1').show();
|
|
$('.topLeft2').hide();
|
|
break;
|
|
case 4:
|
|
$('.topRight1').show()
|
|
$('.topRight2').hide()
|
|
break;
|
|
case 5:
|
|
$('.bottomLeft1').show()
|
|
$('.bottomLeft2').hide()
|
|
break;
|
|
case 6:
|
|
$('.bottomRight1').show()
|
|
$('.bottomRight2').hide()
|
|
break;
|
|
}
|
|
}
|
|
|
|
//点击显示音乐条
|
|
function showyinliang(id){
|
|
|
|
for(let i=0;i<yinlian_all.length;i++){
|
|
if(yinlian_all[i].id==id){
|
|
if($(`.range${id}`).is(':visible')){
|
|
$(`.range${id}`).hide()
|
|
$(`.range${id}`).off()
|
|
}else{
|
|
$(`.range${id}`).show()
|
|
}
|
|
}else{
|
|
$(`.range${yinlian_all[i].id}`).hide()
|
|
}
|
|
}
|
|
|
|
//控制音量的大小
|
|
$(`.range${id}`).on('change',function(){
|
|
console.log(this.value)
|
|
let value=this.value
|
|
$.ajax({
|
|
type:'POST',
|
|
url:'yibin/api/brid/volumeControl',
|
|
dataType:'json',
|
|
contentType:'application/json',
|
|
data:JSON.stringify({
|
|
"id":id,
|
|
"volume1":value,
|
|
"control":"00"
|
|
}),
|
|
success(res){
|
|
console.log(res)
|
|
}
|
|
})
|
|
})
|
|
};
|
|
|
|
function closeYinLian(){
|
|
for(let i=0;i<yinlian_all.length;i++){
|
|
$(`.range${yinlian_all[i].id}`).hide()
|
|
}
|
|
|
|
}
|
|
|
|
//循环按钮
|
|
function Circulation(id,control){
|
|
closeYinLian()
|
|
control='0'+control;
|
|
$.ajax({
|
|
type:'POST',
|
|
url:'yibin/api/brid/musicModel',
|
|
dataType:'json',
|
|
contentType: 'application/json',
|
|
data:JSON.stringify({
|
|
"id":id,
|
|
"control":control
|
|
}),
|
|
success(res){
|
|
if(res.code==200){
|
|
|
|
if(control=="00"){
|
|
$(`#DanXunHuan${id}`).show()
|
|
$(`#AllXunHuan${id}`).hide()
|
|
}else if(control=="01"){
|
|
console.log(control)
|
|
$(`#DanXunHuan${id}`).hide()
|
|
$(`#AllXunHuan${id}`).show()
|
|
}
|
|
}
|
|
console.log(res)
|
|
}
|
|
})
|
|
};
|
|
|
|
//同步设备音乐曲目
|
|
function TongBu(id){
|
|
gsap.fromTo(`.TongBu${id}`, { opacity: 0 }, { opacity: 1, duration: 1 });
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`yibin/api/brid/resetMusicSong?deviceId=${id}`,
|
|
dataType:'json',
|
|
success(res){
|
|
console.log(res)
|
|
}
|
|
})
|
|
}
|
|
|
|
//获取当前的日期
|
|
function GetStartData(value){ //获取当前日期
|
|
let data=new Date();
|
|
let year=data.getFullYear();
|
|
let month=data.getMonth()+1;
|
|
let day=data.getDate();
|
|
let hour=data.getHours();
|
|
let minute=data.getMinutes();
|
|
let second=data.getSeconds();
|
|
|
|
if(month<10){
|
|
month='0'+month
|
|
}
|
|
if(day<10){
|
|
day='0'+day
|
|
}
|
|
if(hour<10){
|
|
hour='0'+hour
|
|
}
|
|
if(minute<10){
|
|
minute='0'+minute
|
|
}
|
|
if(second<10){
|
|
second='0'+second
|
|
}
|
|
|
|
if(value==1){
|
|
return `${hour}-${minute}-${second}`
|
|
}else{
|
|
return `${year}:${month}:${day}T`
|
|
}
|
|
}
|
|
|
|
//对选择的时间进行限制限制
|
|
$('#Start').focus(function(){
|
|
console.log(GetStartData(1))
|
|
$('#Start').attr('value',GetStartData(1))
|
|
|
|
})
|
|
$('#endTime').focus(function(){
|
|
$('#endTime').attr('value',$('#Start').val())
|
|
})
|
|
|
|
|
|
//开始定时播放
|
|
function StartBoFang(){
|
|
// console.log($('#Start').val())
|
|
// console.log($('#endTime').val())
|
|
// console.log($('.select_piao3').val().split('-'))
|
|
let startTime=GetStartData(2)+$('#Start').val()
|
|
let endTime=GetStartData(2)+$('#endTime').val()
|
|
console.log(startTime)
|
|
$.ajax({
|
|
type:'POST',
|
|
url:'yibin/api/brid/timedPlayback',
|
|
dataType:'json',
|
|
contentType:'application/json',
|
|
data:JSON.stringify({
|
|
"id":$('.select_piao3').val().split('-')[0],
|
|
"address":$('.select_piao3').val().split('-')[1],
|
|
"startTime":startTime,
|
|
"endTime":endTime,
|
|
})
|
|
})
|
|
}
|
|
|
|
// 点击显示弹出曲目列表，选择音乐
|
|
function selectMusic(address) {
|
|
$('.music_tanchuang').show()
|
|
document.getElementById("draw_fence").contentWindow.selectBridSongList(address);
|
|
};
|
|
|
|
// 关闭音乐
|
|
function close_tanchuang() {
|
|
$('.music_tanchuang').hide();
|
|
};
|
|
|
|
|
|
let timer;
|
|
|
|
//控制云台的方向的点击事件
|
|
$('.Controls_icon').on('mousedown',function(e){
|
|
let speed=$('.camera_speed').val()
|
|
operationXunHuan(e,0,speed);
|
|
timer=setInterval(()=>{
|
|
operationXunHuan(e,0,speed);
|
|
},100);
|
|
|
|
}).on('mouseup',function(e){
|
|
clearInterval(timer);
|
|
operationXunHuan(e,1,0);
|
|
});
|
|
|
|
$('.ControlsXunHuan').click((e)=>{
|
|
let speed=$('.camera_speed').val();
|
|
if(leftXunHuan==0){
|
|
operationXunHuan(e,leftXunHuan,speed);
|
|
leftXunHuan=1;
|
|
}else{
|
|
operationXunHuan(e,leftXunHuan,speed);
|
|
leftXunHuan=0;
|
|
}
|
|
|
|
})
|
|
|
|
//控制焦距
|
|
$('.Zoom').on('click',function(e){
|
|
// operationXunHuan(e,0,1);
|
|
// console.log($(e.target).attr('class'))
|
|
operationXunHuan(e,0,3)
|
|
})
|
|
$('.Location').on('click',function(e){
|
|
// operationXunHuan(e,0,1);
|
|
// console.log($(e.target).attr('class'))
|
|
operationXunHuan(e,0,3)
|
|
})
|
|
|
|
//控制云台的点击
|
|
function operationXunHuan(e,num,speed){
|
|
if($(e.target).attr('class').indexOf('square_small1')!=-1){
|
|
operationCamera('ZOOM_IN',num,3)
|
|
}else if($(e.target).attr('class').indexOf('square_small2')!=-1){
|
|
operationCamera('ZOOM_OUT',num,3)
|
|
}else if($(e.target).attr('class').indexOf('square_small3')!=-1){
|
|
operationCamera('FOCUS_NEAR',num,3)
|
|
}else if($(e.target).attr('class').indexOf('square_small4')!=-1){
|
|
operationCamera('FOCUS_FAR',num,3)
|
|
}else if($(e.target).attr('class').indexOf('ControlsXunHuan')!=-1){
|
|
operationCamera('PAN_LEFT',num,3)
|
|
}
|
|
|
|
switch ($(e.target).attr('src')){
|
|
case './img/1.png':
|
|
operationCamera('TILT_UP',num,speed)
|
|
break;
|
|
case './img/2.png':
|
|
operationCamera('UP_LEFT',num,speed)
|
|
break;
|
|
case './img/3.png':
|
|
operationCamera('PAN_LEFT',num,speed)
|
|
break;
|
|
case './img/4.png':
|
|
operationCamera('DOWN_LEFT',num,speed)
|
|
break;
|
|
case './img/5.png':
|
|
operationCamera('TILT_DOWN',num,speed)
|
|
break;
|
|
case './img/6.png':
|
|
operationCamera('DOWN_RIGHT',num,speed)
|
|
break;
|
|
case './img/7.png':
|
|
operationCamera('PAN_RIGHT',num,speed)
|
|
break;
|
|
case './img/8.png':
|
|
operationCamera('UP_RIGHT',num,speed)
|
|
break;
|
|
};
|
|
};
|
|
|
|
|
|
//操作摄像头的请求
|
|
function operationCamera(opera,num,speed){
|
|
console.log(cameraContent)
|
|
console.log(opera)
|
|
console.log(num)
|
|
console.log(speed)
|
|
let data={
|
|
'nvrIp':'192.168.1.249',
|
|
'channel':39,
|
|
'dwPTZCommand':opera,
|
|
'dwStop':num,
|
|
'dwSpeed':speed
|
|
};
|
|
$.ajax({
|
|
type:'POST',
|
|
url:'yibin/api/brid/control',
|
|
dataType:'json',
|
|
contentType:'application/json',
|
|
data:JSON.stringify(data),
|
|
success:function(res){
|
|
console.log(res)
|
|
}
|
|
});
|
|
// $.ajax({
|
|
// type:'POST',
|
|
// utl:'yibin/api/brid/angleJump',
|
|
// contentType:'application/json',
|
|
// data:JSON.stringify({
|
|
// "nvrIp":"192.168.1.249",
|
|
// "channel":39,
|
|
// "pointNum":3
|
|
// }),
|
|
// success:function(res){
|
|
// console.log(res)
|
|
// }
|
|
// });
|
|
|
|
};
|
|
|
|
//循环方式点击事件
|
|
$('input[name="gender"]').change(function(){
|
|
let result=''
|
|
switch($('input[name="gender"]:checked').val()){
|
|
case 'day':
|
|
result='<div><span class="everyDay">每天</span></div>'
|
|
$('.radioXuan').html(result)
|
|
break;
|
|
|
|
case 'week':
|
|
for(let i=0;i<7;i++){
|
|
let week=''
|
|
switch (i){
|
|
case 0:
|
|
week='周一';
|
|
break;
|
|
case 1:
|
|
week='周二';
|
|
break;
|
|
case 2:
|
|
week='周三';
|
|
break;
|
|
case 3:
|
|
week='周四';
|
|
break;
|
|
case 4:
|
|
week='周五';
|
|
break;
|
|
case 5:
|
|
week='周六';
|
|
break;
|
|
case 6:
|
|
week='周末';
|
|
break;
|
|
}
|
|
result+=`<div><input type="radio" class="month_radio" name="gender" value="month"><span class="radio_text">${week}</span></div>`
|
|
}
|
|
$('.radioXuan').html(result)
|
|
break;
|
|
|
|
case 'month':
|
|
$('.overspread').attr('style','')
|
|
break;
|
|
}
|
|
})
|
|
|
|
|
|
|
|
$('.subtract_left').on('click',function(){
|
|
if($('.camera_speed').html()>1){
|
|
let result=$('.camera_speed').html()-1
|
|
$('.camera_speed').html(result)
|
|
}
|
|
})
|
|
|
|
$('.add_right').on('click',function(){
|
|
if($('.camera_speed').html()<7){
|
|
let result=Number($('.camera_speed').html())+1
|
|
$('.camera_speed').html(result)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html>
|