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.
1144 lines
46 KiB
1144 lines
46 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<link rel="stylesheet" href="./css/quniaoXiTong.css">
|
|
<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>
|
|
<body>
|
|
<div class="biankaung">
|
|
<div class="cardContent">
|
|
<!-- 左边设备详情和设备状态开始 -->
|
|
<div class="leftContent">
|
|
<div class="smallTitle">
|
|
<img src="./img/left_yuan.png" class="left_yuan">
|
|
<span>设备详情</span>
|
|
<img src="./img/XianBig.png" alt="" class="xianBig">
|
|
<img src="./img/JianTou.png" alt="" class="arrowImage">
|
|
</div>
|
|
|
|
<!-- 设备详情开始 -->
|
|
<div class="detailContent">
|
|
<!-- 设备列表开始 -->
|
|
<div class="deviceList">
|
|
<div class="table_div_top">
|
|
<div class="thead">
|
|
<table class="table1">
|
|
<tr class="color1">
|
|
<th class="Number th1">序号</th>
|
|
<th class="deviceName th1">设备名称</th>
|
|
<th class="operation th1">操作</th>
|
|
<th class="deviceDb th1">设备分贝</th>
|
|
<th class="tracksList th1">曲目列表</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="tbody">
|
|
<table id="list">
|
|
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- 设备列表结束 -->
|
|
</div>
|
|
<!-- 设备详情结束 -->
|
|
|
|
|
|
<div class="smallTitle">
|
|
<img src="./img/left_yuan.png" class="left_yuan">
|
|
<span>设备状态</span>
|
|
<img src="./img/XianBig.png" alt="" class="xianBig">
|
|
<img src="./img/JianTou.png" alt="" class="arrowImage">
|
|
</div>
|
|
|
|
|
|
<!-- 设备状态开始 -->
|
|
<div class="stateContent">
|
|
|
|
<!-- 设备选择开始 -->
|
|
<div class="deviceSelect">
|
|
<div class="stateTitle">设备选择</div>
|
|
<div class="device">
|
|
<div>
|
|
<input type="checkbox" id="deviceCheck1" name="deviceCheckbox" value="1">
|
|
<label class="checkbox" for="deviceCheck1"></label>
|
|
<span>驱鸟设备1</span>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="deviceCheck2" name="deviceCheckbox" value="2">
|
|
<label class="checkbox" for="deviceCheck2"></label>
|
|
<span>驱鸟设备2</span>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="deviceCheck3" name="deviceCheckbox" value="3">
|
|
<label class="checkbox" for="deviceCheck3"></label>
|
|
<span>驱鸟设备3</span>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" id="deviceCheck4" name="deviceCheckbox" value="4">
|
|
<label class="checkbox" for="deviceCheck4"></label>
|
|
<span>驱鸟设备4</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 设备选择结束 -->
|
|
|
|
<!-- 循环方式开始 -->
|
|
<div class="deviceRecursive">
|
|
<div class="stateTitle">循环方式</div>
|
|
<div class='recursive'>
|
|
<div>
|
|
<input type="radio" name="gender" value="每天" id="gender1">
|
|
<label for="gender1"></label>
|
|
<span>日</span>
|
|
</div>
|
|
<div>
|
|
<input type="radio" name="gender" value="每周" id="gender2">
|
|
<label for="gender2"></label>
|
|
<span>周</span>
|
|
</div>
|
|
<div>
|
|
<input type="radio" name="gender" value="每月" id="gender3">
|
|
<label for="gender3"></label>
|
|
<span>月</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 循环方式结束 -->
|
|
|
|
<!-- 循环设置开始 -->
|
|
<div class="deviceLoop">
|
|
<div class="stateTitle">循环设置</div>
|
|
<div class='loop'></div>
|
|
</div>
|
|
<!-- 循环设置结束 -->
|
|
|
|
<!-- 开始时间和结束时间设置 开始 -->
|
|
<div class="timeSelect">
|
|
<div>
|
|
<div class="stateTitle stateTitleSmall">开始时间</div>
|
|
<div class="timeInput">
|
|
<input type="time" step="1" class="startTime">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-left: 6%;">
|
|
<div class="stateTitle stateTitleSmall">结束时间</div>
|
|
<div class="timeInput">
|
|
<input type="time" step="1" class="endTime">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 开始时间和结束时间设置 结束 -->
|
|
|
|
|
|
<!-- 开始和结束按钮 开始 -->
|
|
<div class="stateButton">
|
|
<div>
|
|
<div class="stateTitle stateTitleSmall">任务名称</div>
|
|
<div class="taskNameInput">
|
|
<input class="taskNameText">
|
|
</div>
|
|
</div>
|
|
<img src="./img/kaishi.png" id="startVideo">
|
|
<img src="./img/jieshu.png" id="endVideo">
|
|
</div>
|
|
<!-- 开始和结束按钮 结束 -->
|
|
|
|
</div>
|
|
<!-- 设备状态结束 -->
|
|
|
|
</div>
|
|
<!-- 左边设备详情和设备状态结束 -->
|
|
|
|
<div class="rightContent">
|
|
<div class="taskList">
|
|
<div class="taskListContent">
|
|
<div class="tableContent">
|
|
<div style="padding-right: 3px;height: 8%;">
|
|
<table class="table2">
|
|
<thead>
|
|
<tr class="color1">
|
|
<th class="smallTh th2">任务名称</th>
|
|
<th class="smallTh th2">任务类型</th>
|
|
<th class="bigTh th2">创建时间</th>
|
|
<th class="bigTh th2">任务开始时间</th>
|
|
<th class="bigTh th2">任务结束时间</th>
|
|
<th class="th2">配置</th>
|
|
</tr>
|
|
</thead>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="tableScroll">
|
|
<table class="list2">
|
|
<tbody class="timeTask">
|
|
|
|
</tbody>
|
|
</table>
|
|
</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" onclick="close_tanchuang(1)">取消</div>
|
|
</div>
|
|
|
|
<div class="zheGai">
|
|
<div class="Alert warnAlert">
|
|
<div>
|
|
<img src="./img/alertImg.png" class="alertImg">
|
|
<span class="warnContent"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Alert successAlert">
|
|
<div>
|
|
<img src="./img/success.png" class="alertImg">
|
|
<span class="successContent"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
let cameraContent={}
|
|
let leftXunHuan=0;
|
|
let yinlian_all='';
|
|
let week=[{title:'周一',value:1},{title:'周二',value:2},{title:'周三',value:3},{title:'周四',value:4},{title:'周五',value:5},{title:'周六',value:6},{title:'周日',value:0}];
|
|
let month=[{title:'一月',value:1},{title:'二月',value:2},{title:'三月',value:3},{title:'四月',value:4},{title:'五月',value:5},{title:'六月',value:6},{title:'七月',value:7},{title:'八月',value:8},{title:'九月',value:9},{title:'十月',value:10},{title:'十一月',value:11},{title:'十二月',value:12}];
|
|
// let URL='/yibin/videoMonitor';
|
|
|
|
// let URL=localStorage.getItem('localHost');
|
|
// let URL='http://192.168.1.62:8081';
|
|
let URL='http://192.168.1.108:8081';
|
|
|
|
// 驱鸟设备列表接口
|
|
function selectBridDeviceList() {
|
|
$.ajax({
|
|
//请求方式
|
|
type: 'POST',
|
|
//发送请求的地址
|
|
url:`${URL}/api/brid/selectBridDeviceList`,
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
//发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
|
|
data: JSON.stringify({
|
|
// id: 101
|
|
}),
|
|
success: function (result) {
|
|
console.log(result)
|
|
localStorage.setItem('deviceState',JSON.stringify(result.rows));
|
|
yinlian_all=result.rows;
|
|
var str = '';
|
|
let select='';
|
|
let fenbei='';
|
|
let image1='';
|
|
let image2='';
|
|
let deviceCheck='';
|
|
|
|
for (var i = 0; i < result.rows.length; i++) {
|
|
//处理设备分贝数据
|
|
if(result.rows[i].deviceStatus==1){
|
|
fenbei=result.rows[i].volume1Fb+' dB';
|
|
}else{
|
|
fenbei='';
|
|
};
|
|
|
|
//判断设备是否在播放
|
|
if(result.rows[i].volume1Status==0){
|
|
image1='display:none';
|
|
image2='';
|
|
}else if(result.rows[i].volume1Status==1){
|
|
image2='display:none';
|
|
image1='';
|
|
};
|
|
|
|
//循环加载设备信息
|
|
deviceCheck+=`
|
|
<div>
|
|
<input type="checkbox" id="deviceCheck${i+1}" name="deviceCheckbox" value="${result.rows[i].id}">
|
|
<label class="checkbox" for="deviceCheck${i+1}"></label>
|
|
<span>驱鸟设备${i+1}</span>
|
|
</div>
|
|
`
|
|
|
|
//循环加载设备列表
|
|
if (i % 2 == 0) {
|
|
str+=`
|
|
<tr class="color firstTr">
|
|
<td class="Number td1">${Number(i + 1)}</td>
|
|
<td class="deviceName td1">${result.rows[i].name}</td>
|
|
<td class="operation td1">
|
|
<div class="operationButton">
|
|
<img src="./img/bofang.png" class="point" title="播放" id="play${result.rows[i].id}" alt="" srcset="" style="${image1}" onclick="BoFang(${result.rows[i].id},0)">
|
|
<img src="./img/zanting.png" class="point" title="暂停" id="ZanTing${result.rows[i].id}" alt="" srcset="" style="${image2}" onclick="BoFang(${result.rows[i].id},1)">
|
|
<img src="./img/zhonzhi.png" title="结束" class="point ZhonZhi${result.rows[i].id}" alt="" srcset="" onclick="ZhonZhi(${result.rows[i].id})">
|
|
<img src="./img/yinliang.png" class="point" title="音量" alt="" srcset="" onclick="showyinliang(${result.rows[i].id})">
|
|
<input type="range" class="volume range${result.rows[i].id}" max="100" min="1" step="9" value="${result.rows[i].volume1}">
|
|
<img src="./img/xunhuan(1).png" class="point" title="单曲循环" alt="" srcset="" id="DanXunHuan${result.rows[i].id}" onclick="Circulation(${result.rows[i].id},1)">
|
|
<img src="./img/xunhuan.png" title="循环" class="point" alt="" srcset="" id="AllXunHuan${result.rows[i].id}" onclick="Circulation(${result.rows[i].id},0)" style="display:none">
|
|
</div>
|
|
</td>
|
|
<td class="deviceDb point${result.rows[i].id} td1"> ${fenbei}</td>
|
|
<td class="tracksList td1" onclick='selectMusic(${JSON.stringify(result.rows[i])})'>${result.rows[i].nowSong}</td>
|
|
</tr>`
|
|
} else {
|
|
str+=`
|
|
<tr class="color1 firstTr">
|
|
<td class="Number td1">${Number(i + 1)}</td>
|
|
<td class="deviceName td1">${result.rows[i].name}</td>
|
|
<td class="operation td1">
|
|
<div class="operationButton">
|
|
<img src="./img/bofang.png" class="point" title="播放" id="play${result.rows[i].id}" alt="" srcset="" style="${image1}" onclick="BoFang(${result.rows[i].id},0)">
|
|
<img src="./img/zanting.png" class="point" title="暂停" id="ZanTing${result.rows[i].id}" alt="" srcset="" style="${image2}" onclick="BoFang(${result.rows[i].id},1)">
|
|
<img src="./img/zhonzhi.png" title="结束" class="point ZhonZhi${result.rows[i].id}" alt="" srcset="" onclick="ZhonZhi(${result.rows[i].id})">
|
|
<img src="./img/yinliang.png" class="point" title="音量" alt="" srcset="" onclick="showyinliang(${result.rows[i].id})">
|
|
<input type="range" class="volume range${result.rows[i].id}" max="100" min="1" step="9" value="${result.rows[i].volume1}">
|
|
<img src="./img/xunhuan(1).png" class="point" title="单曲循环" alt="" srcset="" id="DanXunHuan${result.rows[i].id}" onclick="Circulation(${result.rows[i].id},1)">
|
|
<img src="./img/xunhuan.png" class="point" title="循环" alt="" srcset="" id="AllXunHuan${result.rows[i].id}" onclick="Circulation(${result.rows[i].id},0)" style="display:none">
|
|
</div>
|
|
</td>
|
|
<td class="deviceDb point${result.rows[i].id} td1"> ${fenbei}</td>
|
|
<td class="tracksList td1" onclick='selectMusic(${JSON.stringify(result.rows[i])})'>${result.rows[i].nowSong}</td>
|
|
</tr>`
|
|
}
|
|
}
|
|
|
|
//刷新之后默认显示第一个设备的开始和结束时间
|
|
$('#list').html(
|
|
str
|
|
)
|
|
|
|
//根据获取的设备数量，渲染设备状态中的设备选择的设备数量。
|
|
$('.device').html(deviceCheck)
|
|
}
|
|
})
|
|
};
|
|
selectBridDeviceList();
|
|
|
|
function timeRequest(){
|
|
$.ajax({
|
|
//请求方式
|
|
type: 'POST',
|
|
//发送请求的地址
|
|
url:`${URL}/api/brid/selectBridDeviceList`,
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
//发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
|
|
data: JSON.stringify({
|
|
// id: 101
|
|
}),
|
|
success:function(res){
|
|
if(res.code==200){
|
|
let oldDeviceState=JSON.parse(localStorage.getItem('deviceState'));
|
|
let newDeviceState=res.rows;
|
|
|
|
//判断设备的播放状态，定时更新样式
|
|
for(let i=0;i<newDeviceState.length;i++){
|
|
if(newDeviceState[i].volume1Status!=oldDeviceState[i].volume1Status){
|
|
switch(newDeviceState[i].volume1Status){
|
|
case 1:
|
|
$(`#play${newDeviceState[i].id}`).show();
|
|
$(`#ZanTing${newDeviceState[i].id}`).hide();
|
|
break;
|
|
case 0:
|
|
$(`#play${newDeviceState[i].id}`).hide();
|
|
$(`#ZanTing${newDeviceState[i].id}`).show();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
//定时请求设备数据进行状态更新。
|
|
setInterval(()=>{
|
|
timeRequest();
|
|
},1500)
|
|
|
|
|
|
|
|
//隐藏音量条
|
|
function closeYinLian(){
|
|
for(let i=0;i<yinlian_all.length;i++){
|
|
$(`.range${yinlian_all[i].id}`).hide()
|
|
}
|
|
|
|
}
|
|
|
|
//上报声音的状态（暂停，开始，终止）
|
|
function ShanBao(id){
|
|
$.ajax({
|
|
type:'POST',
|
|
//请求地址
|
|
url:`${URL}/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:`${URL}/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 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:`${URL}/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 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(){
|
|
let value=this.value
|
|
// if(value<10){
|
|
// value='0'+this.value
|
|
// }
|
|
console.log(value)
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/volumeControl`,
|
|
dataType:'json',
|
|
contentType:'application/json',
|
|
data:JSON.stringify({
|
|
"id":id,
|
|
"volume1":value,
|
|
"control":"00",
|
|
"volume2":'100'
|
|
}),
|
|
success(res){
|
|
console.log(res)
|
|
|
|
$.ajax({
|
|
//请求方式
|
|
type: 'POST',
|
|
//发送请求的地址
|
|
url:`${URL}/api/brid/selectBridDeviceList`,
|
|
//服务器返回的数据类型
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
//发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
|
|
data: JSON.stringify({
|
|
// id: 101
|
|
}),
|
|
success:function(res){
|
|
if(res.code==200){
|
|
for(let i=0;i<res.rows.length;i++){
|
|
if(res.rows[i].id==id){
|
|
$(`.point${id}`).html(res.rows[i].volume1Fb+'dB');
|
|
};
|
|
};
|
|
}
|
|
}
|
|
})
|
|
}
|
|
});
|
|
});
|
|
};
|
|
|
|
|
|
//循环按钮
|
|
function Circulation(id,control){
|
|
closeYinLian();
|
|
control='0'+control;
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/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 selectMusic(value) {
|
|
$('.music_tanchuang').show()
|
|
document.getElementById("draw_fence").contentWindow.selectBridSongList(value.address);
|
|
$('.zheGai').show();
|
|
};
|
|
|
|
// 关闭弹窗
|
|
function close_tanchuang(value) {
|
|
if(value==1){
|
|
$('.music_tanchuang').hide();
|
|
}
|
|
$('.zheGai').hide();
|
|
};
|
|
|
|
//渲染定时任务列表
|
|
function renderTaskList(){
|
|
$.ajax({
|
|
url:`${URL}/api/brid/deviceTaskList`,
|
|
type:'POST',
|
|
contentType:'application/json',
|
|
data:JSON.stringify({
|
|
|
|
}),
|
|
success:function(res){
|
|
let str='';
|
|
if(res.code==200){
|
|
for(let i=0;i<res.rows.length;i++){
|
|
str+=`
|
|
<tr class="firstTr${i+1}">
|
|
<td class="smallTh taskName td2 ${res.rows[i].taskState==0?'pitch':''}">${res.rows[i].taskName}</td>
|
|
<td class="smallTh td2 ${res.rows[i].taskState==0?'pitch':''}">${res.rows[i].taskType==1?'日计划':res.rows[i].taskType==2?'周计划':'月计划'}</td>
|
|
<td class="bigTh td2 ${res.rows[i].taskState==0?'pitch':''}">${res.rows[i].createTime.split(' ')[0]}</td>
|
|
<td class="bigTh td2 ${res.rows[i].taskState==0?'pitch':''}">${res.rows[i].startTimeinfo}</td>
|
|
<td class="bigTh td2 ${res.rows[i].taskState==0?'pitch':''}">${res.rows[i].endTimeinfo}</td>
|
|
<td class="td2">
|
|
<div class="operaButton">
|
|
<span onclick='startTask(${res.rows[i].id},${res.rows[i].taskState},${i+1})' class="${res.rows[i].taskState==1?'Active':''}">开启</span>
|
|
<span onclick='endTask(${res.rows[i].id},${res.rows[i].taskState},${i+1})' class="${res.rows[i].taskState==0?'Active':''}">结束</span>
|
|
<span onclick='deleteTasks("${res.rows[i].taskCode}",${res.rows[i].taskState})' class="${res.rows[i].taskState==1?'Active':''}">删除</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`
|
|
}
|
|
$('.timeTask').html(str)
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
renderTaskList();
|
|
|
|
//获取当前的年 月 周 日等时间
|
|
function getWeek(value){
|
|
let data=new Date;
|
|
|
|
switch (value){
|
|
case 1:
|
|
return data.getDate();
|
|
break;
|
|
case 2:
|
|
return data.getDay();
|
|
break;
|
|
case 3:
|
|
return data.getMonth();
|
|
break;
|
|
case 4:
|
|
return data.getFullYear();
|
|
break;
|
|
}
|
|
}
|
|
|
|
//选择循环方式
|
|
$("input[name='gender']").change(function(){
|
|
let result=$("input[name='gender']:checked").val();
|
|
let htmlContent=''
|
|
switch(result){
|
|
case '每天':
|
|
htmlContent=`
|
|
<div class="dayInput">
|
|
<input type='date' class='dayInputText'>
|
|
</div>
|
|
`;
|
|
$('.loop').html(htmlContent);
|
|
break;
|
|
|
|
case '每周':
|
|
let result1=0;
|
|
if(getWeek(2)==0){
|
|
result1=7;
|
|
}else{
|
|
result1=getWeek(2);
|
|
}
|
|
week.forEach((item,index)=>{
|
|
htmlContent+=`
|
|
<div>
|
|
<input type="checkbox" id="loopCheck${index+1}" name="loopCheckbox1" value="${item.value}">
|
|
<label class="checkbox1" for="loopCheck${index+1}"></label>
|
|
<span>${item.title}</span>
|
|
</div>
|
|
`
|
|
|
|
// }
|
|
});
|
|
$('.loop').html(htmlContent);
|
|
break;
|
|
case '每月':
|
|
let result2=0;
|
|
console.log(getWeek(3));
|
|
result2=getWeek(3);
|
|
month.forEach((item,index)=>{
|
|
if(index<result2){
|
|
htmlContent+=`
|
|
<div>
|
|
<input type="checkbox" id="loopCheck${index+1}" name="loopCheckbox2" value="${item.value}">
|
|
<label class="checkbox1 disabled" for="loopCheck${index+1}"></label>
|
|
<span>${item.title}</span>
|
|
</div>
|
|
`
|
|
}else{
|
|
htmlContent+=`
|
|
<div>
|
|
<input type="checkbox" id="loopCheck${index+1}" name="loopCheckbox2" value="${item.value}">
|
|
<label class="checkbox1" for="loopCheck${index+1}"></label>
|
|
<span>${item.title}</span>
|
|
</div>
|
|
`
|
|
}
|
|
|
|
});
|
|
$('.loop').html(htmlContent);
|
|
break;
|
|
};
|
|
});
|
|
|
|
//重置所有的单选，复选，输入框
|
|
function resetInput(){
|
|
// console.log($("input[name='gender']"))
|
|
let gender=$("input[name='gender']");
|
|
let loopCheckbox2=$('input[name="loopCheckbox2"]');
|
|
let loopCheckbox1=$('input[name="loopCheckbox1"]');
|
|
let deviceCheckbox=$('input[name="deviceCheckbox"]');
|
|
$('.loop').html('');
|
|
$('.dayInputText').val('');
|
|
$('.startTime').val('');
|
|
$('.endTime').val('');
|
|
$('.taskNameText').val('');
|
|
|
|
for(let i=0;i<gender.length;i++){
|
|
$(gender[i])[0].checked=false;
|
|
}
|
|
|
|
for(let i=0;i<loopCheckbox1.length;i++){
|
|
$(loopCheckbox1[i])[0].checked=false;
|
|
}
|
|
|
|
for(let i=0;i<loopCheckbox2.length;i++){
|
|
$(loopCheckbox2[i])[0].checked=false;
|
|
}
|
|
|
|
for(let i=0;i<deviceCheckbox.length;i++){
|
|
$(deviceCheckbox[i])[0].checked=false;
|
|
}
|
|
}
|
|
|
|
function Alert(content,type){
|
|
if(type==1){
|
|
warnAlert('',content)
|
|
}else{
|
|
successAlert('',content)
|
|
}
|
|
|
|
}
|
|
|
|
//错误弹窗提示
|
|
function warnAlert(option,content){
|
|
$('.zheGai').show();
|
|
$('.warnAlert').show();
|
|
$('.warnContent').html(content);
|
|
setTimeout(function(){
|
|
$('.zheGai').hide();
|
|
$('.warnAlert').hide();
|
|
$('.warnContent').html('');
|
|
option;
|
|
},1000)
|
|
}
|
|
|
|
//成功弹窗提示
|
|
function successAlert(option,content){
|
|
$('.zheGai').show();
|
|
$('.successAlert').show();
|
|
$('.successContent').html(content);
|
|
setTimeout(function(){
|
|
$('.zheGai').hide();
|
|
$('.successAlert').hide();
|
|
$('.successContent').html('');
|
|
option;
|
|
},1000)
|
|
}
|
|
|
|
//取消所选的设备配置
|
|
$('#endVideo').on('click',function(){
|
|
resetInput();
|
|
})
|
|
|
|
|
|
//开始定时播放
|
|
$('#startVideo').on('click',function(){
|
|
console.log(circulation( $('input[name="loopCheckbox1"]'))) //选择星期
|
|
console.log(circulation( $('input[name="loopCheckbox2"]'))) //选择月份
|
|
let genderValue=$("input[name='gender']:checked").val(); //循环方式选择
|
|
let deviceIds=circulation($('input[name="deviceCheckbox"]')).toString(); //设备选择
|
|
let dayInputText=$('.dayInputText').val();
|
|
let taskType=genderValue=='每天'?1:genderValue=='每周'?2:genderValue=='每月'?3:0;
|
|
let taskTimes='';
|
|
let startTimeinfo=$('.startTime').val();
|
|
let endTimeinfo=$('.endTime').val();
|
|
let taskName=$('.taskNameText').val();
|
|
|
|
if(circulation( $('input[name="loopCheckbox1"]')).length>0){ //获取所选择的星期的具体日期
|
|
console.log(getTaskTimes(1));
|
|
taskTimes=getTaskTimes(1);
|
|
}
|
|
|
|
if(circulation($('input[name="loopCheckbox2"]')).length>0){ //获取所选择的月份的具体日期
|
|
console.log(getTaskTimes(2));
|
|
taskTimes=getTaskTimes(2);
|
|
}
|
|
|
|
if(dayInputText){
|
|
let dayTime=[{
|
|
'taskTime':dayInputText
|
|
}]
|
|
taskTimes=dayTime;
|
|
}
|
|
|
|
if(taskName&&deviceIds&&taskType&&startTimeinfo&&endTimeinfo&&taskTimes){
|
|
let params={
|
|
taskName,
|
|
deviceIds,
|
|
taskType,
|
|
startTimeinfo,
|
|
endTimeinfo,
|
|
taskTimes
|
|
}
|
|
|
|
$.ajax({
|
|
url:`${URL}/api/brid/addDeviceTask`,
|
|
type:'POST',
|
|
contentType:'application/json',
|
|
data:JSON.stringify(params),
|
|
success:function(res){
|
|
console.log(res)
|
|
if(res.code==200){
|
|
resetInput();
|
|
Alert('任务添加成功',2);
|
|
renderTaskList();
|
|
}else{
|
|
Alert('所选时间段已存在任务',1);
|
|
}
|
|
}
|
|
})
|
|
}else{
|
|
if(!deviceIds){
|
|
Alert('请选择设备',1);
|
|
}else if(!taskType){
|
|
Alert('请选择循环方式',1);
|
|
}else if(!taskTimes){
|
|
Alert('请输入循环日期',1);
|
|
}else if(!startTimeinfo){
|
|
Alert('请输入任务开始时间',1);
|
|
}else if(!endTimeinfo){
|
|
Alert('请输入任务结束时间',1);
|
|
}else if(!taskName){
|
|
Alert('请输入任务名称',1);
|
|
}
|
|
}
|
|
})
|
|
|
|
|
|
//根据所选的循环方式和循环设置，获取需要执行定时任务的日期列表
|
|
function getTaskTimes(value){
|
|
//value=1 每周 。value=2 每月
|
|
let currentYear=getWeek(4); //获取当前年份
|
|
let currentMonth=getWeek(3)+1; //获取当前月份
|
|
let currentDays=new Date(currentYear,currentMonth,0).getDate(); //获取当前月份的天数
|
|
let currentWeek=getWeek(2); //获取当前星期
|
|
let currentDay=getWeek(1); //当前几号
|
|
|
|
// console.log(currentDays,currentWeek,currentDay)
|
|
let weekTimeList=[];
|
|
if(value==1){ //循环方式是每周
|
|
let selectWeek=circulation( $('input[name="loopCheckbox1"]'));
|
|
selectWeek.forEach((item,index)=>{
|
|
let weekTime='';
|
|
let weekTime1='';
|
|
if(Number(item)<currentWeek &&Number(item)!=0){ //选择的星期在当前星期之前
|
|
let day=7-(currentWeek-Number(item))+currentDay; //计算所选择的星期是几号
|
|
if(day<=currentDays){
|
|
weekTime={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth)+'-'+zeroFill(day)
|
|
}
|
|
}else{
|
|
if(currentMonth==12){ //判断是否为12月
|
|
weekTime={
|
|
'taskTime':(currentYear+1)+'-'+zeroFill(1)+'-'+zeroFill(day-currentDays)
|
|
}
|
|
}else{
|
|
weekTime={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth+1)+'-'+zeroFill(day-currentDays)
|
|
}
|
|
}
|
|
}
|
|
weekTimeList.push(weekTime)
|
|
}else{ //选择的星期在当前星期之后
|
|
let day1='';
|
|
let day2='';
|
|
if(Number(item)==0){ //选择的星期是周日
|
|
day1=(7-currentWeek)+currentDay;
|
|
day2=(14-currentWeek)+currentDay;
|
|
if(day2<=currentDays){
|
|
weekTime={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth)+'-'+zeroFill(day1)
|
|
}
|
|
weekTime1={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth)+'-'+zeroFill(day2)
|
|
}
|
|
}else if(day1>currentDays){
|
|
if(currentMonth==12){ //判断是否为12月
|
|
weekTime={
|
|
'taskTime':(currentYear+1)+'-'+zeroFill(1)+'-'+zeroFill(day1-currentDays)
|
|
}
|
|
weekTime1={
|
|
'taskTime':(currentYear+1)+'-'+zeroFill(1)+'-'+zeroFill(day2-currentDays)
|
|
}
|
|
}else{
|
|
weekTime={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth+1)+'-'+zeroFill(day1-currentDays)
|
|
}
|
|
weekTime1={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth+1)+'-'+zeroFill(day2-currentDays)
|
|
}
|
|
}
|
|
}else if(day1<=currentDays&&day2>currentDays){
|
|
weekTime={
|
|
'taskTime':(currentYear)+'-'+zeroFill(currentMonth)+'-'+zeroFill(day1)
|
|
}
|
|
if(currentMonth==12){ //判断是否为12月
|
|
weekTime1={
|
|
'taskTime':(currentYear+1)+'-'+zeroFill(1)+'-'+zeroFill(day2-currentDays)
|
|
}
|
|
}else{
|
|
weekTime1={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth+1)+'-'+zeroFill(day2-currentDays)
|
|
}
|
|
}
|
|
}
|
|
}else{
|
|
day1=(Number(item)-currentWeek)+currentDay;
|
|
day2=(7+Number(item)-currentWeek)+currentDay;
|
|
if(day2<=currentDays){
|
|
weekTime={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth)+'-'+zeroFill(day1)
|
|
}
|
|
weekTime1={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth)+'-'+zeroFill(day2)
|
|
}
|
|
}else if(day1>currentDays){
|
|
if(currentMonth==12){ //判断是否为12月
|
|
weekTime={
|
|
'taskTime':(currentYear+1)+'-'+zeroFill(1)+'-'+zeroFill(day1-currentDays)
|
|
}
|
|
weekTime1={
|
|
'taskTime':(currentYear+1)+'-'+zeroFill(1)+'-'+zeroFill(day2-currentDays)
|
|
}
|
|
}else{
|
|
weekTime={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth+1)+'-'+zeroFill(day1-currentDays)
|
|
}
|
|
weekTime1={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth+1)+'-'+zeroFill(day2-currentDays)
|
|
}
|
|
}
|
|
}else if(day1<=currentDays&&day2>currentDays){
|
|
weekTime={
|
|
'taskTime':(currentYear)+'-'+zeroFill(currentMonth)+'-'+zeroFill(day1)
|
|
}
|
|
if(currentMonth==12){ //判断是否为12月
|
|
weekTime1={
|
|
'taskTime':(currentYear+1)+'-'+zeroFill(1)+'-'+zeroFill(day2-currentDays)
|
|
}
|
|
}else{
|
|
weekTime1={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth+1)+'-'+zeroFill(day2-currentDays)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
weekTimeList.push(weekTime);
|
|
weekTimeList.push(weekTime1);
|
|
}
|
|
})
|
|
return weekTimeList;
|
|
}else{ //循环方式是每月
|
|
let selectMonth=circulation( $('input[name="loopCheckbox2"]'));
|
|
let monthTimeList=[];
|
|
selectMonth.forEach((item,index)=>{
|
|
let monthTime='';
|
|
if(Number(item)==currentMonth){
|
|
for(let i=currentDay;i<=currentDays;i++){
|
|
monthTime={
|
|
'taskTime':currentYear+'-'+zeroFill(currentMonth)+'-'+zeroFill(i)
|
|
}
|
|
monthTimeList.push(monthTime);
|
|
}
|
|
}else{
|
|
let dataNumber=new Date(currentYear,Number(item),0).getDate();
|
|
for(let i=1;i<=dataNumber;i++){
|
|
monthTime={
|
|
'taskTime':currentYear+'-'+zeroFill(Number(item))+'-'+zeroFill(i)
|
|
}
|
|
monthTimeList.push(monthTime);
|
|
}
|
|
}
|
|
})
|
|
return monthTimeList;
|
|
}
|
|
}
|
|
|
|
|
|
//补零操作
|
|
function zeroFill(value){
|
|
if(value<10){
|
|
return '0'+value
|
|
}else{
|
|
return value
|
|
}
|
|
}
|
|
|
|
|
|
//循环获取已经选中的checkbox的value值
|
|
function circulation(value){
|
|
let result=[];
|
|
for(let i in value){
|
|
if(!isNaN(Number(i)) && value[i].checked){
|
|
// console.log(.checked)
|
|
result.push($(value[i]).val());
|
|
};
|
|
};
|
|
return result;
|
|
}
|
|
|
|
|
|
//获取延时一分钟之后的时间
|
|
function getEndTime(value){
|
|
let endHour=0;
|
|
let endMintue=0;
|
|
let endSecond=0;
|
|
let endTime='';
|
|
console.log(value)
|
|
|
|
if(Number(value.split(':')[1])<59){
|
|
endHour=value.split(':')[0];
|
|
if(Number(value.split(':')[1])<9){
|
|
endMintue='0'+(Number(value.split(':')[1])+1);
|
|
}else{
|
|
endMintue=Number(value.split(':')[1])+1;
|
|
}
|
|
endSecond=value.split(':')[2];
|
|
}else{
|
|
endHour=Number(value.split(':')[0])+1;
|
|
endMintue='00';
|
|
endSecond=value.split(':')[2];
|
|
}
|
|
endTime=endHour+':'+endMintue+':'+endSecond;
|
|
return endTime
|
|
}
|
|
|
|
//开始时间变化时，将结束时间设置延迟一分钟
|
|
$('.startTime').on('change',function(){
|
|
let startHour1=Number($('.startTime').val().split(':')[0]);
|
|
console.log(startHour1)
|
|
if(startHour1>7&&startHour1<20){
|
|
$('.endTime').val(getEndTime($('.startTime').val()));
|
|
}else{ //判断时间是否在8点-20点之间
|
|
warnAlert($('.startTime').val(''),'设置时间区间应在8点-20点');
|
|
}
|
|
})
|
|
|
|
//结束时间变化时，判断结束时间是否大于开始时间。
|
|
$('.endTime').on('change',function(){
|
|
let startHour1=Number($('.startTime').val().split(':')[0]);
|
|
let startMintue1=Number($('.startTime').val().split(':')[1]);
|
|
let startSecond1=Number($('.startTime').val().split(':')[2]);
|
|
|
|
let endHour1=Number($(this).val().split(':')[0]);
|
|
let endMintue1=Number($(this).val().split(':')[1]);
|
|
let endSecond1=Number($(this).val().split(':')[2]);
|
|
|
|
if(endHour1>7&&endHour1<20){
|
|
if(endHour1<startHour1||(endHour1>=startHour1&&endMintue1<startMintue1)||(endHour1>=startHour1&&endMintue1>=startMintue1&&endSecond1<startSecond1)){
|
|
warnAlert($('.endTime').val(getEndTime($('.startTime').val())),'结束时间不能小于开始时间');
|
|
}
|
|
}else{ //判断时间是否在8点-20点之间
|
|
console.log(222222222)
|
|
warnAlert($('.endTime').val(getEndTime($('.startTime').val())),'设置时间区间应在8点-20点');
|
|
}
|
|
})
|
|
|
|
|
|
|
|
//开启定时任务
|
|
function startTask(id,taskState,index){
|
|
console.log(taskState)
|
|
if(taskState==1){
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/updateTaskState`,
|
|
dataType:'json',
|
|
contentType:'application/json',
|
|
data:JSON.stringify({
|
|
taskState:0,
|
|
id
|
|
}),
|
|
success:function(res){
|
|
if(res.code==200){
|
|
renderTaskList();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
//关闭定时任务
|
|
function endTask(id,taskState,index){
|
|
console.log(taskState)
|
|
if(taskState==0){
|
|
console.log(3333)
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URL}/api/brid/updateTaskState`,
|
|
dataType:'json',
|
|
contentType:'application/json',
|
|
data:JSON.stringify({
|
|
taskState:1,
|
|
id
|
|
}),
|
|
success:function(res){
|
|
console.log(res)
|
|
if(res.code==200){
|
|
renderTaskList();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
//删除定时任务
|
|
function deleteTasks(taskCode,taskState){
|
|
console.log(taskState)
|
|
if(taskState==1){
|
|
$.ajax({
|
|
url:`${URL}/api/brid/deleteTaskState`,
|
|
type:'POST',
|
|
data:JSON.stringify({
|
|
taskCode,
|
|
taskState
|
|
}),
|
|
contentType:'application/json',
|
|
success:function(res){
|
|
if(res.code==200){
|
|
renderTaskList();
|
|
}
|
|
}
|
|
})
|
|
}else{
|
|
warnAlert('','执行中的任务无法删除');
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|