保护区-index
index.jsp
<%@ page import="java.util.Date" %>
<%@ page language="java" pageEncoding="UTF-8" %>
<%@ include file="/common/include/taglibs.jsp" %>
<title>${reportTitle}</title>
<link rel="shortcut icon" href="${staticSource}/${icoUrl}"/>
<link href="${staticSource}/resources/layui/css/layui.css?135" rel="stylesheet">
<link href="${staticSource}/resources/css/override.css?1.2" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="${staticSource}/resources/css/comm.css?3"/>
<link rel="stylesheet" type="text/css" href="${staticSource}/resources/report/css/index.css?1.3"/>
<!--Bootstrap双日历 -->
<link rel="stylesheet" type="text/css" href="${staticSource}/resources/css/daterangepicker.css"/>
<link rel="stylesheet" type="text/css" href="${staticSource}/resources/css/style.css"/>
<!--videoJs -->
<link rel="stylesheet" type="text/css" href="${staticSource}/resources/css/video-js.css" rel="stylesheet">
<%--<link href="http://vjs.zencdn.net/5.5.3/video-js.css" rel="stylesheet">--%>
<body>
<div class="reserve">
<div class="header">
<div class="name">${reportName}</div>
<div class="time" id="realTimeDiv">
<fmt:formatDate value="<%=new Date()%>"
pattern="yyyy年MM月dd日 HH:mm:ss"/></div>
<%-- "yyyy-MM-dd HH:mm:ss");--%>
</div>
<div class="main">
<div class="main-1">
<div class="hjjk">
<div class="hjjk-name">环境监控</div>
<div class="hjjk-weather">
<div class="hjjk-icon"><img src="?" id="weather"></div>
<div class="hjjk-info">
<div class="hjjk-desc">
<span>风向：${index['cityVo'].fx}</span><span>相对湿度：${index['cityVo'].shidu}</span><span>风力：${index['cityVo'].fl}</span>
</div>
<div class="hjjk-c">${index['cityVo'].temperature}</div>
</div>
</div>
<div class="hjjk-tj">
<ul>
<li>
<div>
<div class="hjjk-tj-title pd-l-0">今日识别数量（只）</div>
<div class="hjjk-tj-num pd-r-15"
id="todayIdenNumDiv">${index['identificationIndexVo'].todayIdenNum}</div>
</div>
</li>
<li>
<div class="split"></div>
</li>
<li>
<div class="hjjk-tj-title">昨日识别数量（只）</div>
<div class="hjjk-tj-num"><span>${index['identificationIndexVo'].yesterdayIdenNum}</span>
</div>
</li>
<li>
<div class="split"></div>
</li>
<li>
<div class="hjjk-tj-title">在线设备数</div>
<div class="hjjk-tj-num"><span id="onlineNumSpan">${index['deviceIndexVo'].onlineNum}</span>
</div>
</li>
<li>
<div class="split"></div>
</li>
<li>
<div class="hjjk-tj-title">离线设备数</div>
<div class="hjjk-tj-num"><span
id="offLineNumSpan">${index['deviceIndexVo'].offLineNum}</span></div>
</li>
</ul>
</div>
</div>
<div class="bhwz">
<div class="bhwz-name">保护物种数量占比</div>
<div id="main1" style="width: 579px;height:300px;position: absolute;top: 20px;"></div>
</div>
<div class="zzqs">
<div class="zzqs-name">区域折线图</div>
<div id="main3" style="width: 579px;height:280px;position: absolute;top: 20px;margin-top: 32px"></div>
</div>
</div>
<div class="main-2">
<div class="qyrd">
<div class="qyrd-name">区域热度情况</div>
<div id="main2" style="width: 690px;height:498px;position: absolute;text-align: center">
<%-- <img src="${staticSource}/resources/report/images/map.png">--%>
</div>
</div>
<div style="width: 690px;height:349px;position: absolute;text-align: center">
<div class="gtsl">
<div class="gtsl-name">区域个体数量柱状图</div>
<div id="main" style="width: 340px;height:260px;position: absolute;top: 60px;"></div>
</div>
<div class="dwsl">
<div class="dwsl-name">点位数量统计</div>
<div class="dwsl-table">
<table class="table">
<thead>
<tr>
<th>点位</th>
<th>物种数量</th>
<th>个体数量</th>
</tr>
</thead>
<tbody class="table-bordered" id="pointNumStaBody">
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="main-3">
<div class="tj">
<div class="tj-num pd-t-16">
<div class="tj-num-title">累计识别物种数量（只）</div>
<div class="tj-num-li">
<ul>
<li>
<div class="tj-num-li-name">百万</div>
<div class="tj-num-li-number "
id="identifySpeciesnNumBW">${index['distinguishTranVo'].identifySpeciesnNum.baiwan}</div>
</li>
<li>
<div class="tj-num-li-name"></div>
<div class="tj-comma"><img src="${staticSource}/resources/report/images/tj-comma.png">
</div>
</li>
<li>
<div class="tj-num-li-name">十万</div>
<div class="tj-num-li-number "
id="identifySpeciesnNumSW">${index['distinguishTranVo'].identifySpeciesnNum.shiwan}</div>
</li>
<li>
<div class="tj-num-li-name">万</div>
<div class="tj-num-li-number "
id="identifySpeciesnNumW">${index['distinguishTranVo'].identifySpeciesnNum.wan}</div>
</li>
<li>
<div class="tj-num-li-name">千</div>
<div class="tj-num-li-number "
id="identifySpeciesnNumQ">${index['distinguishTranVo'].identifySpeciesnNum.qian}</div>
</li>
<li>
<div class="tj-num-li-name"></div>
<div class="tj-comma"><img src="${staticSource}/resources/report/images/tj-comma.png">
</div>
</li>
<li>
<div class="tj-num-li-name"></div>
<div class="tj-num-li-number "
id="identifySpeciesnNumB">${index['distinguishTranVo'].identifySpeciesnNum.bai}</div>
</li>
<li>
<div class="tj-num-li-name"></div>
<div class="tj-num-li-number "
id="identifySpeciesnNumS">${index['distinguishTranVo'].identifySpeciesnNum.shi}</div>
</li>
<li>
<div class="tj-num-li-name"></div>
<div class="tj-num-li-number "
id="identifySpeciesnNumG">${index['distinguishTranVo'].identifySpeciesnNum.g}</div>
</li>
</ul>
</div>
</div>
<div class="tj-num">
<div class="tj-num-title">累计识别个体数量（只）</div>
<div class="tj-num-li">
<ul>
<li>
<div class="tj-num-li-name">亿</div>
<div class="tj-num-li-number"
id="identifyIndinNumY">${index['distinguishTranVo'].identifyIndinNum.yi}</div>
</li>
<li>
<div class="tj-num-li-name">千万</div>
<div class="tj-num-li-number"
id="identifyIndinNumQW">${index['distinguishTranVo'].identifyIndinNum.qianwan}</div>
</li>
<li>
<div class="tj-num-li-name">百万</div>
<div class="tj-num-li-number"
id="identifyIndinNumBW">${index['distinguishTranVo'].identifyIndinNum.baiwan}</div>
</li>
<li>
<div class="tj-num-li-name"></div>
<div class="tj-comma"><img src="${staticSource}/resources/report/images/tj-comma.png">
</div>
</li>
<li>
<div class="tj-num-li-name">十万</div>
<div class="tj-num-li-number"
id="identifyIndinNumSW">${index['distinguishTranVo'].identifyIndinNum.shiwan}</div>
</li>
<li>
<div class="tj-num-li-name">万</div>
<div class="tj-num-li-number"
id="identifyIndinNumW">${index['distinguishTranVo'].identifyIndinNum.wan}</div>
</li>
<li>
<div class="tj-num-li-name">千</div>
<div class="tj-num-li-number"
id="identifyIndinNumQ">${index['distinguishTranVo'].identifyIndinNum.qian}</div>
</li>
<li>
<div class="tj-num-li-name"></div>
<div class="tj-comma"><img src="${staticSource}/resources/report/images/tj-comma.png">
</div>
</li>
<li>
<div class="tj-num-li-name"></div>
<div class="tj-num-li-number"
id="identifyIndinNumB">${index['distinguishTranVo'].identifyIndinNum.bai}</div>
</li>
<li>
<div class="tj-num-li-name"></div>
<div class="tj-num-li-number"
id="identifyIndinNumS">${index['distinguishTranVo'].identifyIndinNum.shi}</div>
</li>
<li>
<div class="tj-num-li-name"></div>
<div class="tj-num-li-number"
id="identifyIndinNumG">${index['distinguishTranVo'].identifyIndinNum.g}</div>
</li>
</ul>
</div>
</div>
<div class="tj-pic" id="vedioNumStaBody0">
<div class="tj-piclist0">暂无图片</div>
<%-- <div class="tj-piclist1">
<video id="my-video" style="color:black;width:230px;height:130px;border-radius:10px" class="video-js"
muted="true" controls width="230" height="130" data-setup="{}">
<source src='rtmp://101.224.45.66:1935/videolive0_0/stream' type='rtmp/flv'/>
</video>
</div>
<div class="tj-piclist1">暂无图片</div>
<div class="tj-piclist1">暂无图片</div>
<div class="tj-piclist1">暂无图片</div>--%>
</div>
</div>
<div class="video2" id="vedioNumStaBody1">
<div class="tj-piclist1">暂无图片</div>
</div>
</div>
</div>
</div>
<input type="hidden" id="aa" name="aa" value="">
<script type="text/javascript" src="${staticSource}/resources/report/js/jquery.min.js"></script>
<script type="text/javascript" src="${staticSource}/resources/report/js/echarts.js"></script>
<script type="text/javascript" src="${staticSource}/resources/report/js/MyEcharts.js?103"></script>
<script type="text/javascript" src="${staticSource}/resources/report/js/china.js"></script>
<script type="text/javascript" src="${staticSource}/resources/js/socket.io.js"></script>
<script type="text/javascript" src="${staticSource}/resources/js/soketUtilN.js?version=3.0"></script>
<script src="${staticSource}/resources/js/jsrender.min.js" type="text/javascript"></script>
<script src="${staticSource}/resources/js/base.js" type="text/javascript"></script>
<script src="${staticSource}/resources/js/jsrender.converters.js" type="text/javascript"></script>
<script src="${staticSource}/resources/js/formatUtil.js" type="text/javascript"></script>
<script src="${staticSource}/resources/js/streamedian.min.js" type="text/javascript"></script>
<!--videoJs -->
<script src="${staticSource}/resources/js/video/video.min.js" type="text/javascript"></script>
<script src="${staticSource}/resources/js/video/videojs-ie8.min.js" type="text/javascript"></script>
<script id="point_num_sta" type="text/x-jsrender">
{{for data}}
<tr>
<td>{{:pointName}}</td>
<td>{{:speciesNum}}</td>
<td>{{:individualNum}}</td>
</tr>
{{/for}}
</script>
<script id="vedio_num_sta1" type="text/x-jsrender">
{{for}}
<div class="tj-piclist1" id="video_div1">
<video id="test_video1" style="color:black;width:500px;height:280px;border-radius:10px"
class="video-js vjs-big-play-centered" loop="true"
muted="true" controls width="500" height="280" data-setup="{}">
<source src='{{:srtspSubflowAddress}}' type='rtmp/flv'/>
</video>
</div>
{{/for}}
</script>
<script id="vedio_num_sta2" type="text/x-jsrender">
{{for}}
<div class="tj-piclist2" id="video_div2">
<video id="test_video2" style="color:black;width:500px;height:280px;border-radius:10px"
class="video-js vjs-big-play-centered" loop="true"
muted="true" controls width="500" height="280" data-setup="{}">
<source src='{{:srtspSubflowAddress}}' type='rtmp/flv'/>
</video>
</div>
{{/for}}
</script>
<script type="text/javascript">
var apiPath = "${apiPath}";
$(function () {
pointNumStatistics();
lineChar();
playVideo();
imgUrl();
initConnect();
pieChar();
columnChar();
mapChar();
});
</script>
<%--<script type="text/javascript">
var myPlayer5 = videojs('my-video');
videojs("my-video").ready(
function(){
var myPlayer5 = this;myPlayer5.play();
}
);
</script>--%>
<script type="text/javascript">
var myPlayer1;
var myPlayer2;
var rtmpurl = "rtmp://58.200.131.2:1935/livetv/hunantv";
var rtmpur2 = "rtmp://58.200.131.2:1935/livetv/hunantv";
function initConnect() {
// socketObj = connect('${socketIoIdentification}');
}
function upRealTime() {
var realTime = FormatDate("yyyy年MM月dd日 hh:mm:ss");
$('#realTimeDiv').html(realTime);//今日识别数
}
setInterval("upRealTime()", 1000);
function imgUrl() {
var type = "${index['cityVo'].type}";
var weatherType = null;
if (type == '阴') {
weatherType = "${staticSource}/resources/report/images/icon-yt.png";
} else if (type == '多云') {
weatherType = "${staticSource}/resources/report/images/icon-dy.png";
} else if (type == '晴') {
weatherType = "${staticSource}/resources/report/images/icon-qt.png";
} else if (type == '小雨' || type == '中雨' || type == '大雨') {
weatherType = "${staticSource}/resources/report/images/icon-yu.png";
} else if (type == '小雪' || type == '中雪' || type == '大雪') {
weatherType = "${staticSource}/resources/report/images/icon-xue.png";
} else {
weatherType = "${staticSource}/resources/report/images/icon-dy.png";
}
//document.getElementById("weather").src=weatherType;
$("#weather").attr("src", weatherType);
}
function columnChar() {
$.ajax({
type: "post",
url: "/indexReport/columnChar",
async: true,
dataType: "json",
success: function (resp) {
// 柱状图
if (resp.success) {
var myChart = echarts.init(document.getElementById('main'));
var option = drawColumn(resp.data);
myChart.setOption(option);
}
}
});
}
function pieChar() {
$.ajax({
type: "post",
url: "/indexReport/pieChar",
async: true,
dataType: "json",
success: function (resp) {
if (resp.success) {
var myChart1 = echarts.init(document.getElementById('main1'));
var option1 = drawPie(resp.data);
myChart1.setOption(option1);
}
}
});
}
function mapChar() {
$.ajax({
type: "post",
// url: "/indexReport/mapChar",
url: "/indexReport/getMapCharDeviceData",
async: true,
dataType: "json",
success: function (resp) {
if (resp.success) {
var myChart2 = echarts.init(document.getElementById('main2'));
var deviceData = getDeviceData(resp.data);
var deviceDataLX = getDeviceDataLX(resp.data);
var cityName = "${reportCityName}.json";
var uploadedDataURL = "${staticSource}/resources/js/echarts/" + cityName;
myChart2.showLoading();
//var data = mapData;
$.get(uploadedDataURL, function (geoJson) {
echarts.registerMap(cityName, geoJson);
myChart2.hideLoading();
//x 小左大右 y 上下
var geoCoordMap = {${reportCityCoordinate}};
var data = [
{name: '${reportCityDatabaseName}', value: 200}];
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var option2 = {
title: {
text: '',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},
//放地图展示的
tooltip: {
trigger: 'item',
formatter: function (params) {
if (isEmpty(params.data.exhibition)) {
return params.name;
} else {
return '设备名称: ' + params.data.exhibition + '<br/>'
+ '设备编号: ' + params.data.code + '<br/>'
/* + '设备IP: ' + params.data.ip + '<br/>'*/
+ '识别物种数量: ' + params.data.idenSpeciesTotalNum + '<br/>'
+ '识别个体数量: ' + params.data.idenTotalNum
}
}
},
//右下角
legend: {
orient: 'vertical',
id: 1,
y: 'bottom',
x: 'right',
itemWidth: 15,
data: [{
name: '在线设备',
icon: iconZX
},
{
name: '离线设备',
icon: iconLX
}
],
textStyle: {
color: '#fff'
}
},
//展示地图
geo: {
show: true,
map: cityName,
label: {
normal: {
show: false
}
,
emphasis: {
show: false
}
}
,
roam: true, //是否可以拖拽地图
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#3fdaff',
borderWidth: 2,
shadowColor: 'rgba(63, 218, 255, 0.5)',
shadowBlur: 30
}
,
emphasis: {
areaColor: '#2B91B7',
}
}
}
,
series: [
{
type: 'map',
map: cityName,
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: convertData(data)
},
{
name: '在线设备',
type: 'scatter',
coordinateSystem: 'geo',
data: deviceData,
symbol: iconZX,
/* symbol: function (val, param) {
//console.log(param.data.type);
if (!isEmpty(param.data.status) && param.data.status === 10) {//根据设备状态展示不同图标
return iconZX;
} else {
return iconLX;
}
},*/
symbolSize: 18,
label: {
normal: {
show: true,
formatter: function (params) {
// console.log(params);
return params.data.exhibition;
},
position: 'right',
color: '#fff',
fontSize: '8'
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ea6347',
borderWidth: 2,
borderColor: '#f4b391'
}
}
},
{
name: '离线设备',
type: 'scatter',
coordinateSystem: 'geo',
data: deviceDataLX,
symbol: iconLX,
symbolSize: 18,
label: {
normal: {
show: true,
formatter: function (params) {
// console.log(params);
return params.data.exhibition;
},
position: 'right',
color: '#fff',
fontSize: '8'
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ea6347',
borderWidth: 2,
borderColor: '#f4b391'
}
}
}
]
};
myChart2.setOption(option2);
});
}
}
});
}
function lineChar() {
$.ajax({
type: "post",
url: "/indexReport/lineChar",
async: true,
dataType: "json",
success: function (resp) {
if (resp.success) {
if (resp.data.length > 0) {
var myChart3 = echarts.init(document.getElementById('main3'));
var option3 = drawLine(resp.data);
myChart3.setOption(option3);
}
}
}
});
}
function pointNumStatistics() {
$.ajax({
type: "POST",
url: "/indexReport/pointNumStatistics",
async: true,
dataType: "json",
success: function (resp) {
if (resp.success) {
var html = $("#point_num_sta").render(resp);
$("#pointNumStaBody").html(html);
}
}
});
}
function createdom(fid, id, classIc) {
/*style="color:black;width:500px;height:280px;border-radius:10px"*/
var newVideo = document.createElement("div");//创建一个标签
newVideo.innerHTML = '<div class=' + classIc + ' > <video id=' + id + ' width="500" height="280" class="video-js vjs-default-skin vjs-big-play-centered" controls muted="true" loop="true" preload="none" data-setup="{}" ></video> </div>';
var Fid = document.getElementById(fid);//通过id号获取newVideo的父节点（也就是上一级的节点）
Fid.appendChild(newVideo);//把创建的节点newVideo添加到父节点中；
}
function playVideo() {
$.ajax({
type: "POST",
url: "/indexReport/playVideoDevice",
async: true,
dataType: "json",
success: function (resp) {
if (resp.success) {
var data = resp.data;
if (!isEmpty(data) && data.length > 0) {
var length = data.length;
for (var i = 0; i < length; i++) {
var videoPlayer = $("#test_video" + i).get(0);
var rtmpur= data[i].srtspSubflowAddress;
if (typeof (videoPlayer) != "undefined") {
$("#vedioNumStaBody" + i).html("");
var myPlayer = videojs('test_video' + i);
myPlayer.dispose();
createdom('vedioNumStaBody' + i, 'test_video' + i, 'tj-piclist' + i);
playrtmp('test_video' + i, rtmpur);
} else {
$("#vedioNumStaBody" + i).html("");
createdom('vedioNumStaBody' + i, 'test_video' + i, 'tj-piclist' + i);
playrtmp('test_video' + i, rtmpur);
}
}
if (length != 2) {
var videoPlayer = $("#test_video" + 1).get(0);
if (typeof (videoPlayer) != "undefined") {
cleanVideo('test_video' + 1)
}
$("#vedioNumStaBody1").html("<div class=\"tj-piclist1\">暂无图片</div>");
}
} else {
for (var i = 0; i < 2; i++) {
var videoPlayer = $("#test_video" + i).get(0);
if (typeof (videoPlayer) != "undefined") {
cleanVideo('test_video' + i)
}
}
$("#vedioNumStaBody0").html("<div class=\"tj-piclist0\">暂无图片</div>");
$("#vedioNumStaBody1").html("<div class=\"tj-piclist1\">暂无图片</div>");
}
}
}
}
);
}
/* function playrtmp(id) {
myPlayer1 = videojs(id);
myPlayer1.ready(
function () {
this.play();
}
);
}*/
function cleanVideo(id) {
var myPlayer = videojs(id);
myPlayer.dispose();
}
function playrtmp(id, rtmpur) {
myPlayer1 = videojs(id, {
sources: [{
src: rtmpur,
type: 'rtmp/flv'
}]
},
function () {
console.log('rtmp1播放器初始化成功')
});
myPlayer1.play();
}
function upReportData() {
$.ajax({
type: "POST",
url: "/indexReport/getReportData",
async: true,
dataType: "json",
success: function (msg) {
if (msg.success) {
$('#todayIdenNumDiv').html(msg.data.todayIdenNum);//今日识别数
//累计识别物种
$('#identifySpeciesnNumG').html(msg.data.identifySpeciesnNum.g);
$('#identifySpeciesnNumS').html(msg.data.identifySpeciesnNum.shi);
$('#identifySpeciesnNumB').html(msg.data.identifySpeciesnNum.bai);
$('#identifySpeciesnNumQ').html(msg.data.identifySpeciesnNum.qian);
$('#identifySpeciesnNumW').html(msg.data.identifySpeciesnNum.wan);
$('#identifySpeciesnNumSW').html(msg.data.identifySpeciesnNum.shiwan);
$('#identifySpeciesnNumBW').html(msg.data.identifySpeciesnNum.baiwan);
//修改累计识别数量
$('#identifyIndinNumG').html(msg.data.identifyIndinNum.g);
$('#identifyIndinNumS').html(msg.data.identifyIndinNum.shi);
$('#identifyIndinNumB').html(msg.data.identifyIndinNum.bai);
$('#identifyIndinNumQ').html(msg.data.identifyIndinNum.qian);
$('#identifyIndinNumW').html(msg.data.identifyIndinNum.wan);
$('#identifyIndinNumSW').html(msg.data.identifyIndinNum.shiwan);
$('#identifyIndinNumBW').html(msg.data.identifyIndinNum.baiwan);
$('#identifyIndinNumQW').html(msg.data.identifyIndinNum.qianwan);
$('#identifyIndinNumY').html(msg.data.identifyIndinNum.yi);
}
}
});
}
</script>
<script>
</script>
</body>
浙公网安备 33010602011771号