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.
811 lines
33 KiB
811 lines
33 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>
|
|
<link rel="stylesheet" href="./css/quniaosss.css">
|
|
<script type="text/javascript" src="./jquery.min.js"></script>
|
|
<script type="text/javascript" src="./echarts.min.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="biankaung">
|
|
<div class="biankaung1">
|
|
<div class="biankuang1_left">
|
|
<div class="top_left">
|
|
<img src="./img/left_yuan.png" class="titleYuan">
|
|
<span class="top_title">鸟类入侵统计</span>
|
|
<img src="./img/XianBig.png" alt="" class="xianBig">
|
|
<img src="./img/JianTou.png" alt="" class="arrowImage">
|
|
</div>
|
|
|
|
<div class="table_div_top">
|
|
<div class="selectDate">
|
|
<span>选择时间：</span>
|
|
<div class="DateInput">
|
|
<img src="./img/Time.png" class="TimeImage">
|
|
<input type="datetime-local" value="2015-09-24T15:00" step="1" class="startDate"/>
|
|
<span>至</span>
|
|
<input type="datetime-local" value="2015-09-24T15:00" step="1" class="finishDate" min="" max=""/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='TiShiShuJu'>
|
|
<div>
|
|
<span><img src="./img/acousticdevice1.png"><span style="color:rgb(98,208,255,1);margin-left: 15px;">有声波装置区域</span></span>
|
|
<span><img src="./img/acousticdevice2.png"><span style="color:rgb(231,23,60,1);margin-left: 15px;">无声波装置区域</span></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="main"></div>
|
|
</div>
|
|
|
|
<div class="biankuang1_right">
|
|
<div class="top_left">
|
|
<img src="./img/left_yuan.png" class="titleYuan">
|
|
<span class="top_title">鸟类入侵警告</span>
|
|
<img src="./img/XianBig.png" alt="" class="xianBig">
|
|
<img src="./img/JianTou.png" alt="" class="arrowImage">
|
|
</div>
|
|
<div class="table_div_top table_div_top1">
|
|
<div class="time_screening">
|
|
<div><span style="font-size: 1vw;">时间筛选</span></div>
|
|
<div><input type="radio" class="day_radio" name="gender" value="1"><span class="radio_text">日报</span></div>
|
|
<div><input type="radio" class="week_radio" name="gender" value="2"><span class="radio_text">周报</span></div>
|
|
<div><input type="radio" class="month_radio" name="gender" value="3"><span class="radio_text">月报</span></div>
|
|
</div>
|
|
|
|
<div class="data_screening">
|
|
<div><input type="radio" name="gender" value="4"><span class="radio_text">自定义</span></div>
|
|
<div class="data_kuan">
|
|
<input type="date" class="data_input startTime" name="startTime"/>
|
|
<span>-</span>
|
|
<input type="date" class="data_input finishTime" name="finishTime" max="" min=""/>
|
|
</div>
|
|
<div class="overspread"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="data_filter">
|
|
<div><span style="font-size: 1vw;">有无数据筛选</span></div>
|
|
<div><input type="radio" class="allData_radio" name="gender1" checked="checked" value="2"><span class="radio_text">全部</span></div>
|
|
<div><input type="radio" class="haveData_radio" name="gender1" value="1"><span class="radio_text">有数据</span></div>
|
|
<div><input type="radio" class="noData_radio" name="gender1" value="0"><span class="radio_text">无数据</span></div>
|
|
</div>
|
|
|
|
<div class="invade_list">
|
|
<table class="table1">
|
|
|
|
</table>
|
|
</div>
|
|
|
|
<div class="pageStore">
|
|
<div class="paging_device">
|
|
<div>共 <span class="page_count">0</span> 条</div>
|
|
<div class="page_select">
|
|
<select class="select_page" value="10">
|
|
<option value="3">3条/页</option>
|
|
<option value="4">4条/页</option>
|
|
<option value="5">5条/页</option>
|
|
<option value="6">6条/页</option>
|
|
<option value="7">7条/页</option>
|
|
<option value="10" selected>10条/页</option>
|
|
</select>
|
|
</div>
|
|
<div class="pages_select">
|
|
<img src="./img/to_left.png" class="to_left">
|
|
<div class="pages_number">
|
|
<ul class="ul_list">
|
|
</ul>
|
|
</div>
|
|
<img src="./img/to_right.png" class="to_right" >
|
|
</div>
|
|
<div class="pages_skip">
|
|
<span>前往 </span>
|
|
<!-- <span class="pages_skip_number"></span> -->
|
|
<input type="number" class="pages_skip_number" oninput="if(!/^[1-9]+$/.test(value)) value=value.split('.')[0];if(value<1)value=null">
|
|
<span> 页</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="preview_popup">
|
|
<img src="./img/closePreview.png" class="close_preview" onclick="closePreview()">
|
|
<div class="preview_popup1">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
// let URLS='http://192.168.1.62:8081'; //测试环境
|
|
let URLS='http://localhost:8081';
|
|
// let URLS=localStorage.getItem('localHost');
|
|
// let URLS='http://192.168.1.235:8081';
|
|
|
|
function initChart(result1,result2,dataZoomEnd){
|
|
let myChart = echarts.init(document.getElementById('main'));
|
|
let colorList=[
|
|
['#4d76ff','#80aaff'],
|
|
['#FF3838','#FF6543']
|
|
];
|
|
var option = {
|
|
dataZoom:[
|
|
{
|
|
type:'inside',
|
|
realtime:true,
|
|
start:0,
|
|
end:dataZoomEnd,
|
|
zoomOnMouseWheel:true
|
|
}
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid:{
|
|
bottom:'60px',
|
|
left:'40px',
|
|
right:'0',
|
|
top:'10px'
|
|
},
|
|
xAxis: {
|
|
type:'category',
|
|
boundaryGap: false,
|
|
boundaryGap: ['20%', '20%'],
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
|
|
axisTick :{
|
|
show:false,
|
|
},
|
|
|
|
axisLabel: {
|
|
interval:0,
|
|
textStyle: {
|
|
color: '#C6D3EC',
|
|
fontSize:'0.6em'
|
|
},
|
|
formatter:function(value){
|
|
return chulidata(value)
|
|
},
|
|
lineHeight:9,
|
|
width:0.4,
|
|
height:6
|
|
},
|
|
},
|
|
yAxis: {
|
|
type:'value',
|
|
// 去除背景横线
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#40486A',
|
|
}
|
|
},
|
|
// 字体颜色
|
|
axisLabel: {
|
|
// formatter: '{value} m³ ', // 给y轴添加单位
|
|
textStyle: {
|
|
color: '#C6D3EC',
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
// 坐标轴颜色
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#40486A',
|
|
},
|
|
},
|
|
min:0,
|
|
minInterval:1
|
|
},
|
|
// new echarts.graphic.LinearGradient(
|
|
// 0, 0, 0, 1,
|
|
// [{offset: 0, color: '#4d76ff'}, {offset: 1, color: '#80aaff'}]
|
|
// ),
|
|
series: [{
|
|
name: '有声波装置区域',
|
|
type: 'bar',
|
|
color:"rgba(255, 243, 136, 0.62)",
|
|
barWidth:12,
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (params){
|
|
return new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[{offset: 0, color: colorList[0][0]}, {offset: 1, color: colorList[0][1]}]
|
|
);
|
|
}
|
|
}
|
|
},
|
|
tooltip:{
|
|
title:'2222222'
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#40486A',
|
|
}
|
|
},
|
|
data: result1
|
|
},{
|
|
name: '无声波装置区域',
|
|
type: 'bar',
|
|
color:"rgba(255, 243, 136, 0.62)",
|
|
barWidth:12,
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (params){
|
|
console.log(params)
|
|
return new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1,
|
|
[{offset: 0, color: colorList[1][0]}, {offset: 1, color: colorList[1][1]}]
|
|
);
|
|
}
|
|
}
|
|
},
|
|
tooltip:{
|
|
title:'2222222'
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#40486A',
|
|
}
|
|
},
|
|
data: result2
|
|
}]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
//图表x坐标轴展示数据处理
|
|
function chulidata(value){
|
|
let year=value.split(' ')[0].split('-')[0]+'年';
|
|
let month=Number(value.split(' ')[0].split('-')[1])+'月';
|
|
let day=Number(value.split(' ')[0].split('-')[2])+'日';
|
|
let time=value.split(' ')[1].slice(0,2)+'时'
|
|
|
|
return year+'\n'+ month+ day+'\n'+ time;
|
|
}
|
|
|
|
//获取列表数据
|
|
function xuanRang(datas,value){
|
|
console.log(datas)
|
|
$.ajax({
|
|
type:'POST',
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
url:`${URLS}/api/brid/reportList`,
|
|
data:JSON.stringify(datas),
|
|
success:function(res){
|
|
let reportType=''; //报告类型
|
|
let result=`<tr>
|
|
<th style="width: 10%;">序号</th>
|
|
<th style="width: 25%;">报告名称</th>
|
|
<th>创建时间</th>
|
|
<th>报告类型</th>
|
|
<th>操作</th>
|
|
</tr>`;
|
|
|
|
let page_select='';
|
|
|
|
showList(res,result);
|
|
|
|
$('.page_count').html(res.allNum);
|
|
|
|
if(value==1){ //根据value来判断是否刷新页数列表 page_select
|
|
for(let i=0;i<res.noPage;i++){
|
|
page_select=page_select+`<li>${i+1}</li>`;
|
|
};
|
|
|
|
$('.ul_list').html(page_select);
|
|
$('.ul_list').attr('style',`margin-left:0px`);
|
|
}
|
|
|
|
// toRightLocal(res.noPage)
|
|
|
|
|
|
if(datas.pNum==1){
|
|
console.log(111111111111)
|
|
$($('.ul_list').children()[0]).addClass('pageColor');
|
|
$($('.ul_list').children()[0]).siblings().removeClass('pageColor');
|
|
};
|
|
}
|
|
});
|
|
};
|
|
|
|
|
|
//页面加载获取chart柱状图数据
|
|
function getChartData(data){
|
|
let dataZoomEnd=0;
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URLS}/api/brid/intrusionNum`,
|
|
dataType:'json',
|
|
contentType:'application/json',
|
|
data:JSON.stringify(data),
|
|
success:function(res){
|
|
let result1=[];
|
|
let result2=[];
|
|
console.log(res)
|
|
res.rows.forEach((item,index)=>{
|
|
let result=item.hour.split(' ')[0]+' '+item.hour.split(' ')[1].slice(0,2)+'时'
|
|
result1.push([result,item.countIsArea]);
|
|
result2.push([result,item.countNoArea]);
|
|
});
|
|
console.log(result1)
|
|
dataZoomEnd=result1.length>10?100:100;
|
|
console.log(dataZoomEnd)
|
|
initChart(result1,result2,dataZoomEnd);
|
|
}
|
|
});
|
|
|
|
// for(let i=0;i<25;i++){
|
|
// result1.push([`2023-${i<10?'0'+i:i}-${i<10?'0'+i:i} 08:00:00`,i])
|
|
// result2.push([`2023-${i<10?'0'+i:i}-${i<10?'0'+i:i} 08:00:00`,i+1])
|
|
// }
|
|
};
|
|
|
|
//根据获取的后台数据展示列表数据
|
|
function showList(res,result){
|
|
for(let i=0;i<res.reportList.length;i++){
|
|
|
|
if(res.reportList[i].reportType==1){
|
|
reportType='日报';
|
|
}else if(res.reportList[i].reportType==2){
|
|
reportType='周报';
|
|
}else if(res.reportList[i].reportType==3){
|
|
reportType='月报';
|
|
}else{
|
|
reportType='自定义';
|
|
};
|
|
|
|
// <td>${res.reportList[i].createTime.split(' ')[0]}</td>
|
|
if(i%2==0){
|
|
result=result+`<tr class="color1">
|
|
<td>${i+1}</td>
|
|
<td>${res.reportList[i].reportName}</td>
|
|
<td>${res.reportList[i].createTime}</td>
|
|
<td>${reportType}</td>
|
|
<td style="color: #1799E2;" class='operation_button'>
|
|
<span onclick='previewFile(${JSON.stringify(res.reportList[i])})'>预览</span>
|
|
<span style="margin-left: 24%;" onclick='downFile(${JSON.stringify(res.reportList[i])})'>下载</span>
|
|
</td>
|
|
</tr>`;
|
|
}else{
|
|
result=result+`<tr class="color2">
|
|
<td>${i+1}</td>
|
|
<td>${res.reportList[i].reportName}</td>
|
|
<td>${res.reportList[i].createTime}</td>
|
|
<td>${reportType}</td>
|
|
<td style="color: #1799E2;" class='operation_button'>
|
|
<span onclick='previewFile(${JSON.stringify(res.reportList[i])})'>预览</span>
|
|
<span style="margin-left: 24%;" onclick='downFile(${JSON.stringify(res.reportList[i])})'>下载</span>
|
|
</td>
|
|
</tr>`;
|
|
};
|
|
};
|
|
$('.table1').html(result);
|
|
};
|
|
|
|
|
|
//根据总页数移动分页器右边箭头的位置，让样式看起来美观
|
|
function toRightLocal(value){
|
|
if(value<7){
|
|
$('.to_right').attr('style',`left:${0.7+(value*2)}vw`);
|
|
}else{
|
|
$('.to_right').attr('style',`left:${0.7+(6*2)}vw`);
|
|
}
|
|
};
|
|
|
|
|
|
|
|
//初始化日期时间
|
|
function initDate(){
|
|
let date=new Date();
|
|
let day=date.getDate();
|
|
let month=date.getMonth();
|
|
let year=date.getFullYear();
|
|
let hour=date.getHours();
|
|
let starthDate1='';
|
|
|
|
console.log(year+'/'+month+'/'+day)
|
|
|
|
let finishDate1=year+'-'+zeroFill(month+1)+'-'+zeroFill(day);
|
|
if(day==1){
|
|
starthDate1=year+'-'+zeroFill(month)+'-'+zeroFill(new Date(year, month, 0).getDate());
|
|
}else{
|
|
starthDate1=year+'-'+zeroFill(month+1)+'-'+zeroFill(day-1);
|
|
};
|
|
|
|
|
|
let finishDate2=year+'-'+zeroFill(month+1)+'-'+zeroFill(day)+'T'+zeroFill(hour)+':00:00';
|
|
let starthDate2=year+'-'+zeroFill(month)+'-'+zeroFill(day)+'T'+zeroFill(hour)+':00:00';
|
|
|
|
|
|
console.log(starthDate1)
|
|
$('.finishTime').attr('value',finishDate1);
|
|
$('.startTime').attr('value',starthDate1);
|
|
|
|
// $('.finishTime').attr('max',starthDate1);
|
|
|
|
$('.finishDate').attr('value',finishDate2);
|
|
$('.startDate').attr('value','2023-10-10T00:00:00');
|
|
};
|
|
|
|
//对日期进行补零操作
|
|
function zeroFill(value){
|
|
if(value<10){
|
|
return '0'+value;
|
|
}else{
|
|
return value;
|
|
};
|
|
};
|
|
|
|
|
|
//对柱状图的筛选时间进行处理
|
|
function disposeChartDate(){
|
|
|
|
let startHour=$('.startDate').val().split('T')[1].slice(0,2)+':'+'00'+':'+"00";
|
|
let startTime=$('.startDate').val().split('T')[0]+' '+startHour;
|
|
|
|
let endHour=$('.finishDate').val().split('T')[1].slice(0,2)+':'+'00'+':'+"00";
|
|
let endTime=$('.finishDate').val().split('T')[0]+' '+endHour;
|
|
console.log(startTime);
|
|
console.log(endTime);
|
|
|
|
return {startTime,endTime};
|
|
}
|
|
|
|
|
|
initDate();
|
|
xuanRang({"pNum":1,'isHave':2,'pSize':Number($('.select_page').val())},1);
|
|
getChartData(disposeChartDate());
|
|
|
|
// getChartData({'startTime':$('.startDate').val(),'endTime':$('.finishDate').val()})
|
|
|
|
|
|
|
|
//时间筛选点击事件
|
|
$('input[name="gender"]').change(function(){
|
|
let dataFilter=$('input[name="gender1"]:checked').val();
|
|
let reportType=$('input[name="gender"]:checked').val();
|
|
if(reportType=='4'){
|
|
$('.overspread').attr('style','display:none')
|
|
}else{
|
|
xuanRang({"reportType":Number(reportType),"pNum":1,'isHave':Number(dataFilter),'pSize':Number($('.select_page').val())},1)
|
|
}
|
|
})
|
|
|
|
//有无数据筛选点击事件
|
|
$('input[name="gender1"]').change(function(){
|
|
let dataFilter=$('input[name="gender1"]:checked').val();
|
|
let reportType=$('input[name="gender"]:checked').val();
|
|
if(reportType=='4'){
|
|
$('.overspread').attr('style','display:none');
|
|
xuanRang({"reportType":4,"startTime":acquisitionDate().startTime,"isHave":Number(dataFilter),"endTime":acquisitionDate().finishTime,"pNum":1,'pSize':Number($('.select_page').val())},1);
|
|
}else{
|
|
xuanRang({"reportType":Number(reportType),"pNum":1,'isHave':Number(dataFilter),'pSize':Number($('.select_page').val())},1)
|
|
}
|
|
})
|
|
|
|
|
|
|
|
//对柱状图筛选的时间做限制
|
|
$('.finishDate').focus(function(){
|
|
$('.finishDate').attr('min',$('.startDate').val())
|
|
})
|
|
|
|
|
|
$('.finishTime').focus(function(){
|
|
$('.finishTime').attr('min',$('.startTime').val())
|
|
})
|
|
|
|
|
|
//预览报告功能
|
|
function previewFile(value){
|
|
console.log(value)
|
|
$('.preview_popup').show()
|
|
let title='';
|
|
let content='';
|
|
let list=` <tr>
|
|
<th style="width: 8%;">序号</th>
|
|
<th style="width: 15%;">入侵时间</th>
|
|
<th style="width: 15%;">入侵区域</th>
|
|
<th>入侵方位</th>
|
|
<th>打击设备</th>
|
|
<th>设备分贝</th>
|
|
<th>执行时间</th>
|
|
<th>执行结果</th>
|
|
</tr>`;
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`${URLS}/api/brid/previewData?reportCode=${value.reportCode}&reportType=${value.reportType}`,
|
|
contentType: 'application/json',
|
|
success:function(res){
|
|
console.log(res)
|
|
let result=``
|
|
$('.preview_popup1').html(result)
|
|
// 开始播放视频
|
|
// $('#video').play();
|
|
let summarize=`宜宾换流站<span class="zhonDian">第二大组交流滤波器区域</span>共发生鸟类<span class="zhonDian">入侵事件${res.content.length}起</span>，联动定向声波驱离装置<span class="zhonDian">启动${res.nameDeviceNum}台</span>，任务执行<span class="zhonDian">成功</span>，未造成第二大组交流滤波器安全生产隐患。`
|
|
title=`<div style="height:8%">
|
|
<span class="report_title">鸟类入侵报告（测试）</span>
|
|
</div>
|
|
<div class="content">
|
|
<div style="margin-left:4%;width:95%">
|
|
<span style="line-height: 30px;"><span class="second_title">一、报告概述</span></br> ${summarize}</span>
|
|
</br>
|
|
<span class="report_time">报告时间：${res.content[0].createTime.split(' ')[0]}</span>
|
|
</div>
|
|
<div>
|
|
<span class="bird_table">表1鸟类入侵事件表</span>
|
|
<table class="table2">
|
|
|
|
</table>
|
|
</div>
|
|
<span class="second_title bird_invade">二、鸟类入侵事件</span>
|
|
<div class="content1">
|
|
|
|
</div>
|
|
|
|
</div>`
|
|
for(let i=0;i<res.content.length;i++){
|
|
list+=`<tr class="color${i%2}">
|
|
<td>${i+1}</td>
|
|
<td>${res.content[i].intrusion_time}</td>
|
|
<td>${res.content[i].position}</td>
|
|
<td>${res.content[i].rqfw}</td>
|
|
<td>${res.content[i].deviceName}</td>
|
|
<td>${res.content[i].sbfb}dB</td>
|
|
<td>${res.content[i].zxsj}秒</td>
|
|
<td>${res.content[i].zxjgName}</td>
|
|
</tr>`
|
|
|
|
content+=`<div class='report_content'>
|
|
<div style='margin-left:4%;width:95%'><span class="third_title">${i+1}.鸟类入侵事件${i+1}</span>
|
|
</br><span> ${i+1}.1探测详情：${res.content[i].intrusion_time},<span class="zhonDian">${res.content[i].position}</span>发生鸟类入侵事件。以防控区域中心北向为基准0角度，<span class="zhonDian">目标位置为${res.content[i].rqfw}</span>。识别结果如下<span class="zhonDian"></span>视频/图${2*i+1}鸟类入侵视频/图*所示：</sapn>
|
|
</div>
|
|
<div>
|
|
<video controls class='report_video'>
|
|
<source type="video/mp4" id="video1" src="./gj/${res.content[i].videoPath}">
|
|
</video></br>
|
|
<span class="bird_table">视频${2*i+1}鸟类入侵视频</span>
|
|
</div>
|
|
|
|
<div>
|
|
<img src='./gj/${res.content[i].picTcPath}' class='report_img'></br>
|
|
<span class="bird_table">图${2*i+1}鸟类入侵抓图</span>
|
|
</div>
|
|
|
|
|
|
<div style='margin-left:4%;width:95%;margin-top:3%;'><span> ${i+1}.2驱离详情：根据入侵方位，启动${res.content[i].deviceName}，<span class="zhonDian">设备分贝${res.content[i].sbfb}dB</span>，<span class="zhonDian">执行时间${res.content[i].zxsj}秒</span>，执行结果<span class="zhonDian">${res.content[i].zxjgName}</span>。打击结果如下视频/图${2*i+2}鸟类驱离视频/图*所示：</span></div>
|
|
<div>
|
|
<video controls class='report_video'>
|
|
<source type="video/mp4" id="video1" src="./gj/${res.content[i].video2Path}">
|
|
</video></br>
|
|
<span class="bird_table">视频${2*i+2}鸟类驱离视频</span>
|
|
</div>
|
|
|
|
<div>
|
|
<img src='./gj/${res.content[i].picDjPath}' class='report_img'></br>
|
|
<span class="bird_table">图${2*i+2}鸟类驱离抓图</span>
|
|
</div>
|
|
</div>`
|
|
}
|
|
$('.preview_popup1').html(title)
|
|
$('.table2').html(list)
|
|
$('.content1').html(content)
|
|
},
|
|
});
|
|
};
|
|
|
|
//取消预览
|
|
function closePreview(){
|
|
$('.preview_popup').hide();
|
|
$('.preview_popup1').html("");
|
|
$('.table2').html("");
|
|
$('.content1').html("");
|
|
}
|
|
|
|
//下载报告功能
|
|
function downFile(value) {
|
|
fetch(`${URLS}/api/brid/downReport?reportCode=${value.reportCode}&reportType=${value.reportType}`) // 发送请求到后台获取PDF报告的字节流
|
|
.then(response => response.blob()) // 将响应转换为Blob对象
|
|
.then(blob => {
|
|
console.log(URL)
|
|
var url = URL.createObjectURL(blob); // 创建Blob URL
|
|
var downloadLink = document.createElement('a');
|
|
downloadLink.href = url;
|
|
downloadLink.download = 'report.doc'; // 设置文件名
|
|
downloadLink.style.display = 'none'; // 隐藏<a>元素
|
|
document.body.appendChild(downloadLink); // 将<a>元素添加到页面中
|
|
downloadLink.click(); // 模拟点击下载链接
|
|
document.body.removeChild(downloadLink); // 移除<a>元素
|
|
})
|
|
.catch(error => {
|
|
console.error('下载失败:', error);
|
|
});
|
|
}
|
|
|
|
//获取变化后的日期数据
|
|
function acquisitionDate(){
|
|
let startTime=$('.startTime').val()+' '+'00:00:00';
|
|
let finishTime=$('.finishTime').val()+' '+'00:00:00';
|
|
return {startTime,finishTime};
|
|
};
|
|
|
|
//监听 “结束日期”变化，进行数据的查询
|
|
$('.finishTime').change(function(){
|
|
let dataFilter=$('input[name="gender1"]:checked').val();
|
|
xuanRang({"reportType":4,"startTime":acquisitionDate().startTime,"isHave":Number(dataFilter),"endTime":acquisitionDate().finishTime,"pNum":1,'pSize':Number($('.select_page').val())},1);
|
|
});
|
|
|
|
//监听 “开始日期”变化，进行数据的查询
|
|
$('.startTime').change(function(){
|
|
let dataFilter=$('input[name="gender1"]:checked').val();
|
|
xuanRang({"reportType":4,"startTime":acquisitionDate().startTime,"isHave":Number(dataFilter),"endTime":acquisitionDate().finishTime,"pNum":1,'pSize':Number($('.select_page').val())},1);
|
|
});
|
|
|
|
|
|
//跳转到相对应的页的功能
|
|
$('.pages_skip_number').blur(function(){
|
|
if($(this).val()<=$('.ul_list').children().length){
|
|
let li1=$('.ul_list').children()[Number($(this).val())-1];
|
|
|
|
if($(this).val()!=''){
|
|
getPageSelect($(this).val(),2);
|
|
}
|
|
|
|
if($('.ul_list').children().length>6){
|
|
if($(this).val()>2 && $(this).val()<$('.ul_list').children().length-2){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number( $(this).val())-3)*2}vw`);
|
|
}else if($(this).val()<=2&&$(this).val()>0){
|
|
$('.ul_list').attr('style',`margin-left:0`);
|
|
}else if($(this).val()>=$('.ul_list').children().length-2){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number($('.ul_list').children().length-3)-3)*2}vw`);
|
|
}
|
|
};
|
|
|
|
$(li1).addClass('pageColor');
|
|
$(li1).siblings().removeClass('pageColor');
|
|
}else if($(this).val()>$('.ul_list').children().length){
|
|
let li2=$('.ul_list').children()[$('.ul_list').children().length-1];
|
|
|
|
getPageSelect($('.ul_list').children().length,2);
|
|
|
|
|
|
if($('.ul_list').children().length>6){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number($('.ul_list').children().length-3)-3)*2}vw`);
|
|
};
|
|
$(li2).addClass('pageColor');
|
|
$(li2).siblings().removeClass('pageColor');
|
|
$(this)[0].value=$('.ul_list').children().length;
|
|
};
|
|
});
|
|
|
|
|
|
//点击分页器下的页数列表请求到相对应的页面数据
|
|
$('.ul_list').on('click',function(e){
|
|
let dom=e.target.localName;
|
|
if(dom=='li'){
|
|
$('.pages_skip_number')[0].value='';
|
|
//点击获取分页后的数据
|
|
getPageSelect($(e.target).html(),2);
|
|
|
|
//移动页数样式
|
|
if($('.ul_list').children().length>6){
|
|
if($(e.target).html()>2 && $(e.target).html()<$('.ul_list').children().length-2){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number($(e.target).html())-3)*2}vw`);
|
|
};
|
|
};
|
|
|
|
//选中点击的页数
|
|
$(e.target).addClass('pageColor');
|
|
$(e.target).siblings().removeClass('pageColor');
|
|
}
|
|
});
|
|
|
|
|
|
//选择每页显示多少条数据
|
|
$('.select_page').change(function(){
|
|
$('.pages_skip_number')[0].value='';
|
|
|
|
getPageSelect(1,1);
|
|
// xuanRang({"pNum":1,'pSize':Number($(this).val())},1)
|
|
});
|
|
|
|
//点击展示下一页的数据
|
|
$('.to_right').click(function(){
|
|
$('.pages_skip_number')[0].value='';
|
|
let startNumber=0;
|
|
for(let i=0;i<$('.ul_list').children().length;i++){
|
|
let li=$('.ul_list').children()[i];
|
|
if($(li).attr('class')=='pageColor'){
|
|
startNumber=Number($(li).html());
|
|
};
|
|
};
|
|
let page=$('.ul_list').children()[startNumber];
|
|
|
|
if(startNumber<$('.ul_list').children().length){
|
|
getPageSelect(startNumber+1,2);
|
|
|
|
if($('.ul_list').children().length>6){
|
|
if(startNumber+1>2 && startNumber+1<$('.ul_list').children().length-2){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number(startNumber+1)-3)*2}vw`);
|
|
};
|
|
};
|
|
};
|
|
|
|
$(page).addClass('pageColor');
|
|
$(page).siblings().removeClass('pageColor');
|
|
});
|
|
|
|
//点击展示上一页的数据
|
|
$('.to_left').click(function(){
|
|
$('.pages_skip_number')[0].value='';
|
|
let startNumber=0;
|
|
for(let i=0;i<$('.ul_list').children().length;i++){
|
|
let li=$('.ul_list').children()[i];
|
|
if($(li).attr('class')=='pageColor'){
|
|
startNumber=Number($(li).html());
|
|
};
|
|
};
|
|
|
|
let page=$('.ul_list').children()[startNumber-2];
|
|
|
|
if(startNumber>1){
|
|
getPageSelect(startNumber-1,2);
|
|
|
|
if($('.ul_list').children().length>6){
|
|
if(startNumber-1>2 && startNumber-1<$('.ul_list').children().length-2){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number(startNumber-1)-3)*2}vw`);
|
|
};
|
|
};
|
|
};
|
|
|
|
$(page).addClass('pageColor');
|
|
$(page).siblings().removeClass('pageColor');
|
|
});
|
|
|
|
|
|
//根据页数请求对应的数据
|
|
function getPageSelect(number,type){
|
|
if($('input[name="gender"]:checked').val()){
|
|
let dataFilter=$('input[name="gender1"]:checked').val();
|
|
let reportType=$('input[name="gender"]:checked').val();
|
|
if(reportType=='4'){
|
|
xuanRang({"reportType":4,"startTime":acquisitionDate().startTime,"isHave":Number(dataFilter),"endTime":acquisitionDate().finishTime,"pNum":Number(number),'pSize':Number($('.select_page').val())},type);
|
|
}else{
|
|
xuanRang({"reportType":Number(reportType),'isHave':Number(dataFilter),"pNum":Number(number),'pSize':Number($('.select_page').val())},type);
|
|
}
|
|
}else{
|
|
xuanRang({"pNum":Number(number),'isHave':2,'pSize':Number($('.select_page').val())},type);
|
|
};
|
|
};
|
|
|
|
//选择起始时间，获取鸟类入侵数据显示在柱状图上
|
|
$('.startDate').blur(function (){
|
|
getChartData(disposeChartDate());
|
|
})
|
|
|
|
$('.finishDate').blur(function (){
|
|
getChartData(disposeChartDate());
|
|
})
|
|
</script>
|
|
|
|
</html>
|