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.
1208 lines
39 KiB
1208 lines
39 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="./tweenjs.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: 16px;
|
|
margin-left: 2px;
|
|
|
|
}
|
|
|
|
.shipin9-1 span {
|
|
position: absolute;
|
|
left: 3%;
|
|
top: 3px;
|
|
z-index: 99;
|
|
}
|
|
|
|
.biankuang1_left {
|
|
padding: 24px;
|
|
width: 58%;
|
|
}
|
|
.biankuang1_right{
|
|
padding: 24px 2px 24px 24px;
|
|
width: 42%;
|
|
float: right;
|
|
}
|
|
|
|
.biankaung {
|
|
width: 1856px;
|
|
height: 856px;
|
|
border: 1px solid #006685;
|
|
background: linear-gradient(to right,rgba(31,45,50,1),rgba(11,19,24,1));
|
|
position: relative;
|
|
}
|
|
.biankaung1{
|
|
width: 1856px;
|
|
height: 816px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.top_title {
|
|
color: #40E5F0;
|
|
position: relative;
|
|
top: -5px;
|
|
font-size: 20px;
|
|
left: 5px;
|
|
}
|
|
.top_left{
|
|
position: relative;
|
|
}
|
|
input {
|
|
background-color: rgba(64,72,106,0);
|
|
outline: none;
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 17px;
|
|
text-align: left;
|
|
padding-left: 30px;
|
|
height: 37px;
|
|
}
|
|
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
|
|
background-image: none;
|
|
position: absolute;
|
|
right: 0;
|
|
padding-left: calc(100% - 40px);
|
|
padding-right: 10px;
|
|
}
|
|
|
|
input[type="date"]::-webkit-calendar-picker-indicator{
|
|
background-image: none;
|
|
position: absolute;
|
|
right: 0;
|
|
padding-left: calc(100% - 100px);
|
|
}
|
|
|
|
input[type="date"]::-webkit-datetime-edit-fields-wrapper{
|
|
padding-left: 10px;
|
|
}
|
|
|
|
input[type="number"]::-webkit-outer-spin-button,
|
|
input[type="number"]::-webkit-inner-spin-button {
|
|
-webkit-appearance: none !important;
|
|
}
|
|
|
|
.inputDate{
|
|
width: 100px;
|
|
}
|
|
.table_div_top{
|
|
height: 50px;
|
|
margin-top: 20px;
|
|
position: relative;
|
|
|
|
}
|
|
.table_div_top1{
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 50px !important;
|
|
align-items: center;
|
|
}
|
|
.selectDate{
|
|
display: flex;
|
|
width: 644px;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
.DateInput{
|
|
height: 35px;
|
|
align-items: center;
|
|
display: flex;
|
|
border: 1px solid rgba(64,72,106,1);
|
|
background-color: rgba(32,47,62,1);
|
|
position: relative;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.TimeImage{
|
|
position: absolute;
|
|
left: 6px;
|
|
width: 16px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.TiShiShuJu{
|
|
width: 440px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: 140px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.TiShiShuJu >span{
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#main{
|
|
width: 1000px;
|
|
height: 610px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.time_screening{
|
|
width: 48%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
border-right: 1px solid rgba(50,61,70,1);
|
|
height: 20px;
|
|
font-size: 14px;
|
|
}
|
|
.time_screening>div{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.data_screening{
|
|
width: 52%;
|
|
height: 20px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
.data_screening>div{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.data_kuan{
|
|
width: 260px;
|
|
height: 30px;
|
|
border: 1px solid rgba(64,72,106,1);
|
|
justify-content: space-around;
|
|
}
|
|
.radio_text{
|
|
margin-left: 4px;
|
|
}
|
|
input[type='radio']{
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.data_input{
|
|
padding: 0;
|
|
height: 30px;
|
|
}
|
|
.invade_list{
|
|
font-size: 18px;
|
|
font-weight: 100;
|
|
margin-top: 65px;
|
|
}
|
|
.table1{
|
|
border-collapse: collapse;
|
|
}
|
|
.table1 th{
|
|
width: 164px;
|
|
border: 1px solid rgba(64,72,106,1);
|
|
height: 40px;
|
|
background-color: rgba(16,29,41,1);
|
|
}
|
|
.table1 td{
|
|
border: 1px solid rgba(64,72,106,1);
|
|
height: 38px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
.table2{
|
|
border-collapse: collapse;
|
|
margin-left: 30px;
|
|
margin-top: 10px;
|
|
}
|
|
.table2 th{
|
|
width: 80px;
|
|
border: 1px solid rgba(64,72,106,1);
|
|
height: 30px;
|
|
background-color: rgba(16,29,41,1);
|
|
}
|
|
.table2 td{
|
|
border: 1px solid rgba(64,72,106,1);
|
|
height: 30px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
.color1{
|
|
background: rgba(23,37,51,1);
|
|
}
|
|
.color2{
|
|
background: rgba(32,47,62,1);
|
|
}
|
|
.paging_device{
|
|
height: 50px;
|
|
width: 625px;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: -80px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
}
|
|
.page_select{
|
|
margin-left: 26px;
|
|
width: 88px;
|
|
height: 24px;
|
|
|
|
background: rgba(32,47,62,1);
|
|
line-height: 24px;
|
|
position: relative;
|
|
border-radius: 3px;
|
|
}
|
|
.pages_select{
|
|
position: relative;
|
|
width: 250px;
|
|
margin-left: 46px;
|
|
}
|
|
|
|
.pages_select>img{
|
|
position: absolute;
|
|
top: 6px;
|
|
}
|
|
|
|
.pages_select>img:hover{
|
|
cursor: pointer;
|
|
}
|
|
.select_img{
|
|
width: 12px;
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
}
|
|
|
|
.to_left{
|
|
|
|
}
|
|
|
|
.to_right{
|
|
right: 30px
|
|
}
|
|
|
|
.ul_list{
|
|
list-style: none;
|
|
padding:0;
|
|
margin: 0;
|
|
display: flex;
|
|
}
|
|
.ul_list>li{
|
|
width: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.ul_list>li:hover{
|
|
cursor: pointer;
|
|
}
|
|
.pages_number{
|
|
height: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 200px;
|
|
overflow: hidden;
|
|
margin-left: 9px;
|
|
}
|
|
.pages_skip{
|
|
margin-left: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.pages_skip_number{
|
|
display: inline-block;
|
|
width: 44px;
|
|
height: 24px;
|
|
border: 1px solid rgba(217,217,217,1);
|
|
background: rgba(32,47,62,1);
|
|
border-radius: 3px;
|
|
padding: 0;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
.overspread{
|
|
width: 260px;
|
|
height: 30px;
|
|
background-color: rgba(1,1,1,0);
|
|
position: absolute;
|
|
left: 114px;
|
|
}
|
|
|
|
.select_page{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0,0,0,0);
|
|
color: #ffffff;
|
|
border: 1px solid rgba(217,217,217,1);
|
|
border-radius: 3px;
|
|
outline: none;
|
|
font-size: 14px;
|
|
padding-left: 12px;
|
|
}
|
|
.select_page>option{
|
|
background-color:rgba(11,19,24,1) ;
|
|
color: #fff;
|
|
font-size: 14px;
|
|
}
|
|
.operation_button>span:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.pageColor{
|
|
color:#40E5F0
|
|
}
|
|
|
|
.preview_popup{
|
|
width: 780px;
|
|
height: 700px;
|
|
border: 1px solid #006685;
|
|
position: absolute;
|
|
top: 90px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: linear-gradient(to right,rgba(31,45,50,1),rgba(11,19,24,1));
|
|
display: none;
|
|
}
|
|
|
|
.preview_popup1{
|
|
height: 690px;
|
|
}
|
|
|
|
.report_title{
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: 50px;
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
}
|
|
|
|
.report_img{
|
|
width: 92%;
|
|
margin-left: 30px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.report_video{
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.report_content{
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.close_preview{
|
|
position: fixed;
|
|
right: 10px;
|
|
top: 10px;
|
|
}
|
|
.close_preview:hover{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.content{
|
|
overflow-y: scroll;
|
|
height: 92%;
|
|
}
|
|
.content::-webkit-scrollbar{
|
|
display: none;
|
|
}
|
|
|
|
#video{
|
|
width: 100%;
|
|
height: 50%;
|
|
}
|
|
</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="biankaung1">
|
|
<div class="biankuang1_left">
|
|
<div class="top_left">
|
|
<img src="./img/left_yuan.png">
|
|
<span class="top_title">鸟类入侵统计</span>
|
|
<img src="./img/xian.png" alt="" style="float: right;">
|
|
<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" style="padding-left: 20px;" class="finishDate"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class='TiShiShuJu'>
|
|
<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">
|
|
<span class="top_title">鸟类入侵警告</span>
|
|
<img src="./img/xian.png" alt="" style="position: absolute;left: 0;">
|
|
<div class="table_div_top table_div_top1">
|
|
<div class="time_screening">
|
|
<div><span style="font-size: 16px;">时间筛选</span></div>
|
|
<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 class="data_screening">
|
|
<div><input type="radio" name="gender" value="custom"><span class="radio_text" style="font-size: 14px;">自定义</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"/>
|
|
</div>
|
|
<div class="overspread"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="invade_list">
|
|
<table class="table1">
|
|
<!-- <tr>
|
|
<th style="width: 64px;">序号</th>
|
|
<th>报告名称</th>
|
|
<th>告警时间</th>
|
|
<th>报告类型</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
|
|
<tr class="color1">
|
|
<td>1</td>
|
|
<td>鸟类入侵详情</td>
|
|
<td>2022-09-01 13:33:38</td>
|
|
<td>日报</td>
|
|
<td style="color: #1799E2;">
|
|
<span>预览</span>
|
|
<span style="margin-left: 45px;" >下载</span>
|
|
</td>
|
|
</tr> -->
|
|
</table>
|
|
</div>
|
|
|
|
<div class="paging_device">
|
|
<div>共 <span class="page_count">0</span> 条</div>
|
|
<div class="page_select">
|
|
<!-- <span> 8条 / 页</span><img src="./img/select.png" class="select_img"> -->
|
|
<select class="select_page">
|
|
<option value="1">1条/页</option>
|
|
<option value="2">2条/页</option>
|
|
<option value="3">3条/页</option>
|
|
<option value="4">4条/页</option>
|
|
<option value="6">6条/页</option>
|
|
<option value="8">8条/页</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">
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<video id="video"></video>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
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:false
|
|
}
|
|
],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid:{
|
|
bottom:'40px',
|
|
left:'40px',
|
|
right:'0'
|
|
},
|
|
xAxis: {
|
|
type:'category',
|
|
boundaryGap: false,
|
|
boundaryGap: ['20%', '20%'],
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
|
|
axisTick :{
|
|
show:false
|
|
},
|
|
|
|
axisLabel: {
|
|
textStyle: {
|
|
color: '#C6D3EC',
|
|
fontSize:'14'
|
|
},
|
|
formatter:function(value){
|
|
return value.split(' ')[0]+'\n'+value.split(' ')[1].slice(0,2)+':'+'00'
|
|
},
|
|
width:1,
|
|
height:2
|
|
},
|
|
},
|
|
yAxis: {
|
|
type:'value',
|
|
// 去除背景横线
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#40486A',
|
|
}
|
|
},
|
|
// 字体颜色
|
|
axisLabel: {
|
|
// formatter: '{value} m³ ', // 给y轴添加单位
|
|
textStyle: {
|
|
color: '#C6D3EC',
|
|
fontSize: '14',
|
|
},
|
|
},
|
|
// 坐标轴颜色
|
|
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:25,
|
|
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]}]
|
|
);
|
|
}
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#40486A',
|
|
}
|
|
},
|
|
data: result1
|
|
},{
|
|
name: '无声波装置区域',
|
|
type: 'bar',
|
|
color:"rgba(255, 243, 136, 0.62)",
|
|
barWidth:25,
|
|
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]}]
|
|
);
|
|
}
|
|
}
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#40486A',
|
|
}
|
|
},
|
|
data: result2
|
|
}]
|
|
};
|
|
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
}
|
|
|
|
//获取列表数据
|
|
function xuanRang(datas,value){
|
|
$.ajax({
|
|
type:'POST',
|
|
dataType: 'json',
|
|
contentType: 'application/json',
|
|
url:'yibin/api/brid/reportList',
|
|
data:JSON.stringify(datas),
|
|
success:function(res){
|
|
let reportType=''; //报告类型
|
|
let result=`<tr>
|
|
<th style="width: 64px;">序号</th>
|
|
<th>报告名称</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 result1=[];
|
|
let result2=[];
|
|
let dataZoomEnd=result1.length>10?32:100;
|
|
$.ajax({
|
|
type:'POST',
|
|
url:'yibin/api/brid/intrusionNum',
|
|
dataType:'json',
|
|
contentType:'application/json',
|
|
data:JSON.stringify(data),
|
|
success:function(res){
|
|
let result1=[];
|
|
let result2=[];
|
|
res.rows.forEach((item,index)=>{
|
|
result1.push([item.hour,item.countIsArea]);
|
|
result2.push([item.hour,item.countNoArea]);
|
|
});
|
|
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='自定义';
|
|
};
|
|
|
|
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: 45px;" 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: 45px;" onclick='downFile(${JSON.stringify(res.reportList[i])})'>下载</span>
|
|
</td>
|
|
</tr>`;
|
|
};
|
|
};
|
|
$('.table1').html(result);
|
|
};
|
|
|
|
|
|
//根据总页数移动分页器右边箭头的位置，让样式看起来美观
|
|
function toRightLocal(value){
|
|
switch(value){
|
|
case 1:
|
|
$('.to_right').attr('style','right:190px');
|
|
break;
|
|
|
|
case 2:
|
|
$('.to_right').attr('style','right:150px');
|
|
break;
|
|
|
|
case 3:
|
|
$('.to_right').attr('style','right:108px');
|
|
break;
|
|
|
|
case 4:
|
|
$('.to_right').attr('style','right:68px');
|
|
break;
|
|
|
|
case 5:
|
|
$('.to_right').attr('style','right:30px');
|
|
break;
|
|
|
|
default:
|
|
$('.to_right').attr('style','right:30px');
|
|
};
|
|
};
|
|
|
|
|
|
|
|
//初始化日期时间
|
|
function initDate(){
|
|
let date=new Date();
|
|
let day=date.getDate();
|
|
let month=date.getMonth();
|
|
let year=date.getFullYear();
|
|
let hour=date.getHours();
|
|
|
|
console.log(year+'/'+month+'/'+day)
|
|
|
|
let finishDate1=year+'-'+zeroFill(month+1)+'-'+zeroFill(day);
|
|
let 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';
|
|
|
|
|
|
$('.finishTime').attr('value',finishDate1);
|
|
$('.startTime').attr('value',starthDate1);
|
|
|
|
$('.finishDate').attr('value',finishDate2);
|
|
$('.startDate').attr('value',starthDate2);
|
|
};
|
|
|
|
//对日期进行补零操作
|
|
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,'pSize':Number($('.select_page').val())},1);
|
|
getChartData(disposeChartDate());
|
|
|
|
// getChartData({'startTime':$('.startDate').val(),'endTime':$('.finishDate').val()})
|
|
|
|
|
|
|
|
//时间筛选点击事件
|
|
$('input[name="gender"]').change(function(){
|
|
switch($('input[name="gender"]:checked').val()){
|
|
case 'day':
|
|
$('.overspread').attr('style','')
|
|
xuanRang({"reportType":1,"pNum":1,'pSize':Number($('.select_page').val())},1)
|
|
break;
|
|
|
|
case 'week':
|
|
$('.overspread').attr('style','')
|
|
xuanRang({"reportType":2,"pNum":1,'pSize':Number($('.select_page').val())},1)
|
|
break;
|
|
|
|
case 'month':
|
|
$('.overspread').attr('style','')
|
|
xuanRang({"reportType":3,"pNum":1,'pSize':Number($('.select_page').val())},1)
|
|
break;
|
|
|
|
case 'custom':
|
|
$('.overspread').attr('style','display:none')
|
|
break;
|
|
}
|
|
})
|
|
|
|
//预览报告功能
|
|
function previewFile(value){
|
|
console.log(value)
|
|
$('.preview_popup').show()
|
|
let title='';
|
|
let content='';
|
|
let list=` <tr>
|
|
<th style="width: 45px;">序号</th>
|
|
<th style="width: 145px;">入侵时间</th>
|
|
<th style="width: 100px;">入侵区域</th>
|
|
<th>入侵方位</th>
|
|
<th>打击设备</th>
|
|
<th>设备分贝</th>
|
|
<th>执行时间</th>
|
|
<th>执行结果</th>
|
|
</tr>`;
|
|
$.ajax({
|
|
type:'POST',
|
|
url:`yibin/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=`${res.content[0].createTime.split(' ')[0]}，宜宾换流站第一大组交流滤波器区域共发生鸟类入侵事件${res.content.length}起，联动定向声波驱离装置启动${res.content.length}次，任务执行成功，未造成第一大组交流滤波器安全生产隐患。`
|
|
title=`<div>
|
|
<span class="report_title">${res.title}</span>
|
|
</div>
|
|
<div class="content">
|
|
<div style="margin-top:12px;margin-left:33px;width:92%"><span>报告概述：${summarize}</span></div>
|
|
<div>
|
|
<table class="table2">
|
|
|
|
</table>
|
|
</div>
|
|
|
|
<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}fb</td>
|
|
<td>${res.content[i].zxsj}秒</td>
|
|
<td>${res.content[i].zxjgName}</td>
|
|
</tr>`
|
|
|
|
content+=`<div class='report_content'>
|
|
<div style='margin-left:30px;width:92%'><span>鸟类入侵事件${i+1}：</span>
|
|
<br><span>探测详情：${res.content[i].createTime},${res.content[i].position}发生鸟类入侵事件。以防控区域中心北向为基准0角度，目标位置为${res.content[i].rqfw}。识别结果如下所示：</sapn>
|
|
</div>
|
|
<video width="717" height="400" controls class='report_video'>
|
|
<source type="video/mp4" id="video1" src="data:video/mp4;base64,${res.content[i].intrusionMp4}">
|
|
</video>
|
|
<img src='data:image/jpg;base64,${res.content[i].picTcPathBase64}' class='report_img'>
|
|
|
|
<div style='margin-left:30px;width:92%'><span>打击详情：根据入侵方位，启动1号驱鸟器，设备分贝${res.content[i].sbfb}fb，执行时间${res.content[i].zxsj}秒，执行结果${res.content[i].zxjgName}。打击结果如下所示：</span></div>
|
|
<video width="717" height="400" controls class='report_video'>
|
|
<source type="video/mp4" id="video1" src="data:video/mp4;base64,${res.content[i].intrusionMp4}">
|
|
</video>
|
|
<img src='data:image/jpg;base64,${res.content[i].picDjPathBase64}' class='report_img'>
|
|
</div>`
|
|
}
|
|
// res.content.forEach((index,item)=>{
|
|
|
|
|
|
// // console.log(title)
|
|
// })
|
|
|
|
$('.preview_popup1').html(title)
|
|
$('.table2').html(list)
|
|
$('.content1').html(content)
|
|
},
|
|
// error:function(){
|
|
// let result1=`<img src="./img/closePreview.png" class="close_preview" onclick="closePreview()">`
|
|
// $('.preview_popup').html(result1)
|
|
// }
|
|
});
|
|
};
|
|
|
|
//取消预览
|
|
function closePreview(){
|
|
$('.preview_popup').hide()
|
|
$('.preview_popup1').html("")
|
|
$('.table2').html("")
|
|
$('.content1').html("")
|
|
}
|
|
|
|
//下载报告功能
|
|
function downFile(value) {
|
|
fetch(`yibin/api/brid/downReport?reportCode=${value.reportCode}&reportType=${value.reportType}`) // 发送请求到后台获取PDF报告的字节流
|
|
.then(response => response.blob()) // 将响应转换为Blob对象
|
|
.then(blob => {
|
|
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(){
|
|
xuanRang({"reportType":4,"startTime":acquisitionDate().startTime,"endTime":acquisitionDate().finishTime,"pNum":1,'pSize':Number($('.select_page').val())},1);
|
|
});
|
|
|
|
//监听 “开始日期”变化，进行数据的查询
|
|
$('.startTime').change(function(){
|
|
xuanRang({"reportType":4,"startTime":acquisitionDate().startTime,"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];
|
|
|
|
getPageSelect($(this).val(),2);
|
|
// xuanRang({"pNum":Number($(this).val()),'pSize':Number($('.select_page').val())},2)
|
|
|
|
if($('.ul_list').children().length>5){
|
|
if($(this).val()>2 && $(this).val()<$('.ul_list').children().length-1){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number( $(this).val())-3)*40}px`);
|
|
};
|
|
};
|
|
|
|
$(li1).addClass('pageColor');
|
|
$(li1).siblings().removeClass('pageColor');
|
|
}else{
|
|
let li2=$('.ul_list').children()[$('.ul_list').children().length-1];
|
|
|
|
getPageSelect($('.ul_list').children().length,2);
|
|
// xuanRang({"pNum":Number($('.ul_list').children().length),'pSize':Number($('.select_page').val())},2)
|
|
|
|
|
|
if($('.ul_list').children().length>5){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number($('.ul_list').children().length-2)-3)*40}px`);
|
|
};
|
|
$(li2).addClass('pageColor');
|
|
$(li2).siblings().removeClass('pageColor');
|
|
$(this)[0].value=$('.ul_list').children().length;
|
|
};
|
|
});
|
|
|
|
|
|
//点击分页器下的页数列表请求到相对应的页面数据
|
|
$('.ul_list').on('click',function(e){
|
|
$('.pages_skip_number')[0].value='';
|
|
//点击获取分页后的数据
|
|
getPageSelect($(e.target).html(),2);
|
|
|
|
//移动页数样式
|
|
if($('.ul_list').children().length>5){
|
|
if($(e.target).html()>2 && $(e.target).html()<$('.ul_list').children().length-1){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number($(e.target).html())-3)*40}px`);
|
|
};
|
|
};
|
|
|
|
//选中点击的页数
|
|
$(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>5){
|
|
if(startNumber+1>2 && startNumber+1<$('.ul_list').children().length-1){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number(startNumber+1)-3)*40}px`);
|
|
};
|
|
};
|
|
};
|
|
|
|
$(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>5){
|
|
if(startNumber-1>2 && startNumber-1<$('.ul_list').children().length-1){
|
|
$('.ul_list').attr('style',`margin-left:${-(Number(startNumber-1)-3)*40}px`);
|
|
};
|
|
};
|
|
};
|
|
|
|
$(page).addClass('pageColor');
|
|
$(page).siblings().removeClass('pageColor');
|
|
});
|
|
|
|
|
|
//根据页数请求对应的数据
|
|
function getPageSelect(number,type){
|
|
if($('input[name="gender"]:checked').val()){
|
|
switch($('input[name="gender"]:checked').val()){
|
|
case 'day':
|
|
xuanRang({"reportType":1,"pNum":Number(number),'pSize':Number($('.select_page').val())},type);
|
|
break;
|
|
|
|
case 'week':
|
|
xuanRang({"reportType":2,"pNum":Number(number),'pSize':Number($('.select_page').val())},type);
|
|
break;
|
|
|
|
case 'month':
|
|
xuanRang({"reportType":3,"pNum":Number(number),'pSize':Number($('.select_page').val())},type);
|
|
break;
|
|
|
|
case 'custom':
|
|
xuanRang({"reportType":4,"startTime":acquisitionDate().startTime,"endTime":acquisitionDate().finishTime,"pNum":Number(number),'pSize':Number($('.select_page').val())},type);
|
|
break;
|
|
}
|
|
}else{
|
|
xuanRang({"pNum":Number(number),'pSize':Number($('.select_page').val())},type);
|
|
};
|
|
};
|
|
|
|
|
|
|
|
//选择起始时间，获取鸟类入侵数据显示在柱状图上
|
|
$('.startDate').blur(function (){
|
|
getChartData(disposeChartDate());
|
|
})
|
|
|
|
$('.finishDate').blur(function (){
|
|
getChartData(disposeChartDate());
|
|
})
|
|
</script>
|
|
|
|
</html>
|