保护区-index
index.jsp
<%@ page import="java.util.Date" %> <%@ page language="java" pageEncoding="UTF-8" %> <%@ include file="/common/include/taglibs.jsp" %>${reportTitle} <%----%><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> <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}}${reportName}<%-- "yyyy-MM-dd HH:mm:ss");--%>环境监控风向：${index['cityVo'].fx}相对湿度：${index['cityVo'].shidu}风力：${index['cityVo'].fl}${index['cityVo'].temperature}
--%>
区域个体数量柱状图点位数量统计
点位 物种数量 个体数量 累计识别物种数量（只）
{{/for}} </script> <script id="vedio_num_sta1" type="text/x-jsrender"> {{for}} {{:pointName}} {{:speciesNum}} {{:individualNum}} {{/for}} </script> <script id="vedio_num_sta2" type="text/x-jsrender"> {{for}}{{/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 + '
' + '设备编号: ' + params.data.code + '
' /* + '设备IP: ' + params.data.ip + '
'*/ + '识别物种数量: ' + params.data.idenSpeciesTotalNum + '
' + '识别个体数量: ' + 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 = ''; 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("暂无图片"); } } 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("暂无图片"); $("#vedioNumStaBody1").html("暂无图片"); } } } } ); } /* 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>