|
|
@@ -0,0 +1,357 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<!--<html lang="en" xmlns:th="http://www.thymeleaf.org">-->
|
|
|
+<html xmlns:th="http://www.w3.org/1999/xhtml">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
|
+ <title>智慧林业森林防火</title>
|
|
|
+ <link rel="stylesheet" th:href="@{/visualization/images/zhly_body.css}">
|
|
|
+ <!-- 全局js -->
|
|
|
+ <script th:src="@{/js/jquery.min.js}"></script>
|
|
|
+ <script th:src="@{/js/bootstrap.min.js}"></script>
|
|
|
+ <script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
|
|
|
+ <script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
|
|
|
+ <script th:src="@{/js/jquery.contextMenu.min.js}"></script>
|
|
|
+ <script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
|
|
|
+ <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
|
|
|
+ <script th:src="@{/ruoyi/js/ry-ui.js}"></script>
|
|
|
+ <script th:src="@{/ruoyi/js/common.js}"></script>
|
|
|
+ <script th:src="@{/ruoyi/index.js}"></script>
|
|
|
+ <script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
|
|
|
+ <script th:src="@{/visualization/js/sj.js}"></script>
|
|
|
+ <script>
|
|
|
+ var loginName = "[[${loginName}]]";
|
|
|
+ $(function(){
|
|
|
+ openSocket(loginName);
|
|
|
+ var action = "[[${action}]]";
|
|
|
+ $("div[url='"+action+"']").click();
|
|
|
+ $('input:checkbox').click(function () {
|
|
|
+ reloadMarks(getCheckedArray());
|
|
|
+ });
|
|
|
+
|
|
|
+ $("a[name='yxt']").click(function () {
|
|
|
+ $("#map")[0].contentWindow.showYxt();
|
|
|
+ });
|
|
|
+ $("a[name='lkt']").click(function () {
|
|
|
+ $("#map")[0].contentWindow.showLkt();
|
|
|
+ });
|
|
|
+ $("a[name='xzt']").click(function () {
|
|
|
+ $("#map")[0].contentWindow.showXzt();
|
|
|
+ });
|
|
|
+ $("a[name='lwt']").click(function () {
|
|
|
+ $("#map")[0].contentWindow.showLwt();
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+ function reloadMarks(arr){
|
|
|
+ $("#map")[0].contentWindow.reloadMarks(arr);
|
|
|
+ }
|
|
|
+
|
|
|
+ function getCheckedArray(){
|
|
|
+ var arr = new Array();
|
|
|
+ $('input:checkbox[name=leftNav]:checked').each(function(){
|
|
|
+ arr.push($(this).attr("id"));
|
|
|
+ });
|
|
|
+ return arr;
|
|
|
+ }
|
|
|
+
|
|
|
+ function checkedAll(){
|
|
|
+ $('input:checkbox[name=leftNav]').each(function(){
|
|
|
+ $('input:checkbox[name=leftNav]').prop("checked", true);
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ function openDetailsDia(eventId,reservePlanType){
|
|
|
+ var prefix = "[[@{/visualization/event/getVisualizationDetails?eventId=}]]"+eventId+"&reservePlanType="+reservePlanType;
|
|
|
+ $.modal.open('警情信息', prefix,$(document).width(),$(document).height());
|
|
|
+ }
|
|
|
+ function revertMap(){
|
|
|
+ $(".active").click();
|
|
|
+ }
|
|
|
+
|
|
|
+ function audioPlay(){
|
|
|
+ var video = $('#fireaudio');
|
|
|
+ video[0].play();
|
|
|
+ }
|
|
|
+ function audioPause(){
|
|
|
+ var video = $('#fireaudio');
|
|
|
+ video[0].pause();
|
|
|
+ }
|
|
|
+
|
|
|
+ function showWrjDia(url){
|
|
|
+ var prefix = "[[@{/visualization/event/showWrjDia?url=}]]"+url;
|
|
|
+ $.modal.open('无人机实时画面', prefix,$(document).width(),$(document).height());
|
|
|
+ }
|
|
|
+
|
|
|
+ var socket;
|
|
|
+ function openSocket(loginName) {
|
|
|
+ if(typeof(WebSocket) == "undefined") {
|
|
|
+ console.log("您的浏览器不支持WebSocket");
|
|
|
+ }else{
|
|
|
+ console.log("您的浏览器支持WebSocket");
|
|
|
+ //实现化WebSocket对象，指定要连接的服务器地址与端口 建立连接
|
|
|
+ //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
|
|
|
+ //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
|
|
|
+ var socketUrl="http://218.27.1.157:9090/business/app/websocket/"+loginName;
|
|
|
+ // var socketUrl="http://127.0.0.1/business/app/websocket/"+loginName;
|
|
|
+ socketUrl=socketUrl.replace("https","ws").replace("http","ws");
|
|
|
+ console.log(socketUrl);
|
|
|
+ if(socket!=null){
|
|
|
+ socket.close();
|
|
|
+ socket=null;
|
|
|
+ }
|
|
|
+ socket = new WebSocket(socketUrl);
|
|
|
+ //打开事件
|
|
|
+ socket.onopen = function() {
|
|
|
+ console.log("websocket已打开");
|
|
|
+ //socket.send("这是来自客户端的消息" + location.href + new Date());
|
|
|
+ };
|
|
|
+ //获得消息事件
|
|
|
+ socket.onmessage = function(msg) {
|
|
|
+ // var text ='{"content":"String content","id":"0d44d0027e424e898f60a456ca8b8a6a","latitude":"5318807.94","longitude":"13874773.35","title":"String title"}';
|
|
|
+ var message = msg.data;
|
|
|
+ if(message != "" && message != null){
|
|
|
+
|
|
|
+ // var json = $.parseJSON(msg.data);
|
|
|
+ var json = message;
|
|
|
+ console.log(message.content);
|
|
|
+ console.log(json);
|
|
|
+ //防火
|
|
|
+ if(json.reserveplanType == 'reserveplan_type_1'){
|
|
|
+ $("#map")[0].contentWindow.slfhMarker(json,function(res){
|
|
|
+ if(res){
|
|
|
+ var video = $('#fireaudio');
|
|
|
+ video[0].play();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //病虫害
|
|
|
+ if(json.reserveplanType == 'reserveplan_type_2'){
|
|
|
+ $("#map")[0].contentWindow.bchMarker(json,function(res){
|
|
|
+ if(res){
|
|
|
+ var video = $('#fireaudio');
|
|
|
+ video[0].play();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //偷盗
|
|
|
+ if(json.reserveplanType == 'reserveplan_type_3'){
|
|
|
+ $("#map")[0].contentWindow.toudMarker(json,function(res){
|
|
|
+ if(res){
|
|
|
+ var video = $('#fireaudio');
|
|
|
+ video[0].play();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //乱砍乱伐
|
|
|
+ if(json.reserveplanType == 'reserveplan_type_4'){
|
|
|
+ $("#map")[0].contentWindow.lklfMarker(json,function(res){
|
|
|
+ if(res){
|
|
|
+ var video = $('#fireaudio');
|
|
|
+ video[0].play();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //偷沙采石
|
|
|
+ if(json.reserveplanType == 'reserveplan_type_5'){
|
|
|
+ $("#map")[0].contentWindow.tscsMarker(json,function(res){
|
|
|
+ if(res){
|
|
|
+ var video = $('#fireaudio');
|
|
|
+ video[0].play();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ //刷新iframe
|
|
|
+ $('#qt_iframe').attr('src', $('#qt_iframe').attr('src'));
|
|
|
+ }
|
|
|
+ };
|
|
|
+ //关闭事件
|
|
|
+ socket.onclose = function() {
|
|
|
+ console.log("websocket已关闭");
|
|
|
+ };
|
|
|
+ //发生了错误事件
|
|
|
+ socket.onerror = function() {
|
|
|
+ console.log("websocket发生了错误");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ </script>
|
|
|
+</head>
|
|
|
+<body style="background:#003;">
|
|
|
+<ul style="display: none;" th:each="carCounts : ${carCounts}">
|
|
|
+ <input th:id="${carCounts.SM_ID}" th:value="${carCounts.CAR_COUNT}"/>
|
|
|
+</ul>
|
|
|
+<div id="background">
|
|
|
+ <iframe th:src="@{/visualization/event/getVisualizationMap}" id="map" scrolling="no" style="width: 100%;height: 100%;"></iframe>
|
|
|
+ <script>
|
|
|
+ // iframe高度
|
|
|
+ var hei = $(document).height();
|
|
|
+ $("#background").height(hei - 200);
|
|
|
+ </script>
|
|
|
+</div>
|
|
|
+<!-- 头部 开始-->
|
|
|
+
|
|
|
+<div class="header clearfix">
|
|
|
+ <div class="fl logo"><img th:src="@{/visualization/images/zhly_01.png}"/></div>
|
|
|
+ <div class="fr timing">
|
|
|
+ <div class="xl_select fl">
|
|
|
+ <div class="se_div clearfix">
|
|
|
+ <p class="on"><span class="jkd"><a>监控端</a></span><i></i></p>
|
|
|
+ <p><span class="gld"><a th:href="@{/index}" target="_blank">管理端</a></span><i></i></p>
|
|
|
+ <p><span class="dsjd"><a th:href="@{/bigdata/inspection/getBigDataInspection}" target="_blank">大数据端</a></span><i></i></p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="time fl">
|
|
|
+ <div class="sfm"></div>
|
|
|
+ <div class="nyr"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tx_yh fl"><img th:src="@{/visualization/images/zhly_04.png}"/></div>
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
+<!-- 头部 结束-->
|
|
|
+<!-- 导航 开始-->
|
|
|
+<div class="nav_div clearfix">
|
|
|
+ <div class="nav sj">
|
|
|
+ <div class="n_div on" url="getVisualizationFrame">
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">事件</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nav lwt">
|
|
|
+ <div class="n_div" url="getVisualizationFrame_LWT">
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">瞭望台</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nav sxt">
|
|
|
+ <div class="n_div" url="getVisualizationFrame_SXT">
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">警戒头</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nav syjqd">
|
|
|
+ <div class="n_div" url="getVisualizationFrame_SYSQ">
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">水源水渠</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nav sl">
|
|
|
+ <div class="n_div" url="getVisualizationFrame_SL">
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">森林</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nav cl">
|
|
|
+ <div class="n_div" url="getVisualizationFrame_CL">
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">车辆</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nav ry">
|
|
|
+ <div class="n_div" url="getVisualizationFrame_RY">
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">人员</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nav wrj">
|
|
|
+ <div class="n_div" onclick="window.open('getWRJdemo')" >
|
|
|
+ <!--url="getVisualizationFrame_WRJ"-->
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">无人机</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nav lz">
|
|
|
+ <div class="n_div" url="getVisualizationFrame_WRJGJ">
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">无人机轨迹</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nav wrj">
|
|
|
+ <div class="n_div" onclick="window.open('getmeasure')">
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">测量</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="nav wrj">
|
|
|
+ <div class="n_div" onclick="window.open('getmeasure_size')">
|
|
|
+ <a class="a_img"></a>
|
|
|
+ <a class="a_txt">测量面积</a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!--<div class="nav lz">-->
|
|
|
+ <!--<div class="n_div" url="getVisualizationFrame_LZ">-->
|
|
|
+ <!--<a class="a_img"></a>-->
|
|
|
+ <!--<a class="a_txt">设置障碍点</a>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+
|
|
|
+
|
|
|
+</div>
|
|
|
+<!-- 导航 结束-->
|
|
|
+<!--二维三维 开始-->
|
|
|
+<div class="wei">
|
|
|
+ <ul class="wei_tab">
|
|
|
+ <li class="slide1"></li>
|
|
|
+ <li class="slide2"></li>
|
|
|
+ <li class="slide2"></li>
|
|
|
+ <li class="slide2"></li>
|
|
|
+ <li class="ew_li aa"><a class="active" name="yxt">影像图</a></li>
|
|
|
+ <li class="aa"><a name="lkt">轮廓图</a></li>
|
|
|
+ <li class="aa"><a name="xzt">行政图</a></li>
|
|
|
+ <li class="aa"><a name="lwt">路网图</a></li>
|
|
|
+ </ul>
|
|
|
+ <!--<ul class="test-long">-->
|
|
|
+ <!--<li><img src="../images/cej.png"><span>测距</span></li>-->
|
|
|
+ <!--<li><img src="../images/cemj.png"><span>测面积</span></li>-->
|
|
|
+ <!--<li><img src="../images/gbcj.png"><span>退出测量</span></li>-->
|
|
|
+ <!--</ul>-->
|
|
|
+</div>
|
|
|
+
|
|
|
+<!--二维三维 结束-->
|
|
|
+<!--事件 左侧导航 开始-->
|
|
|
+<div class="left_nav">
|
|
|
+ <label><input type="checkbox" checked name="leftNav" id="slfh" />森林防火</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="bch" >病虫害</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="lwt" />瞭望台</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="sxt" />警戒头</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="toud" />偷盗</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="lklf" />乱砍滥伐</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="tscs" />偷沙采石</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="phd" />扑火队</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="jjd" />机降点</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="qxz" />气象站</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="fhjcz" />防火检查站</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="lyj" />林业局</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="lc" />林场</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="sy" />水源</label>
|
|
|
+ <label><input type="checkbox" name="leftNav" id="jywz" />救援物资</label>
|
|
|
+</div>
|
|
|
+<!--事件 左侧导航 结束-->
|
|
|
+<!--森林 左侧导航 开始-->
|
|
|
+<div class="left_nav" id="sl_nav">
|
|
|
+ <label><input type="radio" name="all_event" value="石岭镇林场轮廓" id="slzlc" />石岭林场</label>
|
|
|
+ <label><input type="radio" name="all_event" value="山门镇（城东乡）轮廓" id="smzlc" >山门镇（城东乡）</label>
|
|
|
+ <label><input type="radio" name="all_event" value="叶赫林场轮廓" id="yhlc" />叶赫林场</label>
|
|
|
+ <label><input type="radio" name="all_event" value="二龙湖林场轮廓" id="rlhlc" />二龙湖</label>
|
|
|
+ <label><input type="radio" name="all_event" value="种子园轮廓" id="zzylc" />种子园</label>
|
|
|
+</div>
|
|
|
+<!--森林 左侧导航 结束-->
|
|
|
+<!-- iframe嵌套 开始-->
|
|
|
+<div class="zhly_k">
|
|
|
+ <span class="zhly_close "><img th:src="@{/visualization/images/zhly_06.png}"/></span>
|
|
|
+ <iframe th:src="@{/visualization/event/getVisualizationFrame}" id="qt_iframe" scrolling="no"></iframe>
|
|
|
+</div>
|
|
|
+<!-- iframe嵌套 结束-->
|
|
|
+<audio id="fireaudio" loop th:src="@{/audio/firelong.wav}" controls="controls" refs="audio" style="display: none;"/>
|
|
|
+</body>
|
|
|
+<script>
|
|
|
+ $("input[name='all_event']").click(function() {
|
|
|
+ $("#map")[0].contentWindow.pushData($(this));
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</html>
|
|
|
+
|
limeng