地图页面初步改造

mybusiness/src/main/java/com/business/slfh/visualization/event/service/impl/Visualization_Event_Service_Impl.java

@@ -243,9 +243,15 @@ public class Visualization_Event_Service_Impl extends BaseService implements Vis
         String action = request.getParameter("action") == null ? "getVisualizationFrame" : request.getParameter("action");
         //查询每个林场有多少车
         List<Visualization_Car_Count> carCounts = getSuperMap_Car_Count();
+        //查询所有摄像头
+        Visualization_Camera visualizationCamera = new Visualization_Camera();
+        visualizationCamera.setMODEL("camera_type_1");
+        visualizationCamera.setDEPTID("100");
+        List<Visualization_Camera> cameras = Visualization_Camera(visualizationCamera);
         map.put("action", action);//跳转的路径
         map.put("loginName", ShiroUtils.getLoginName());
         map.put("carCounts", carCounts);
+        map.put("cameras", cameras);
         return "business/visualization/event_special_usr";
     }
 

mybusiness/src/main/resources/templates/business/visualization/event_special_usr.html

@@ -21,6 +21,29 @@
     <script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
     <script th:src="@{/visualization/js/sj.js}"></script>
     <script>
+        var jsonArray = new Array();
+
+        function buildJSON(id, lat, lng, name, address, remark, model, radius, hik_camera_id,hik_ip, hik_port, hik_username, hik_password, hik_deviceport) {
+            var json = {
+                id: id,
+                latitude: lat,
+                longitude: lng,
+                name: name,
+                address: address,
+                remark: remark,
+                model: model,
+                radius: radius,
+                hik_ip: hik_ip,
+                hik_port: hik_port,
+                hik_username: hik_username,
+                hik_password: hik_password,
+                hik_deviceport: hik_deviceport,
+                hik_camera_id : hik_camera_id
+            };
+            jsonArray.push(json);
+        }
+    </script>
+    <script>
         var loginName = "[[${loginName}]]";
         $(function(){
             openSocket(loginName);
@@ -214,74 +237,74 @@
 </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_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')" >-->
+<!--            &lt;!&ndash;url="getVisualizationFrame_WRJ"&ndash;&gt;-->
+<!--            <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>-->
@@ -290,7 +313,7 @@
     <!--</div>-->
 
 
-</div>
+<!--</div>-->
 <!--	导航  结束-->
 <!--二维三维 开始-->
 <div class="wei">
@@ -313,45 +336,66 @@
 
 <!--二维三维 结束-->
 <!--事件 左侧导航 开始-->
-<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">-->
+<!--    <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>
+<!--<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>
+<!--<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;"/>
+
+<!-- 遍历list -->
+<li style="display: none;" th:each="camera : ${cameras}">
+    <script>
+        buildJSON(
+            '[[${camera.ID}]]', '[[${camera.LATITUDE}]]', '[[${camera.LONGITUDE}]]', '[[${camera.NAME}]]','[[${camera.ADDRESS}]]','[[${camera.REMARK}]]',
+            '[[${camera.MODEL}]]', '[[${camera.RADIUS}]]', '[[${camera.HIK_CAMERA_ID}]]','[[${camera.HIK_IP}]]', '[[${camera.HIK_PORT}]]', '[[${camera.HIK_USERNAME}]]',
+            '[[${camera.HIK_PASSWORD}]]', '[[${camera.HIK_DEVICEPORT}]]'
+        )
+    </script>
+</li>
 </body>
 <script>
+    $(function () {
+        console.log(jsonArray);
+        setTimeout(addSxt, 1000);
+
+    });
+
     $("input[name='all_event']").click(function() {
         $("#map")[0].contentWindow.pushData($(this));
     });
+
+    function addSxt(){
+        $("#map")[0].contentWindow.addSxtForSearch(jsonArray);//只显示摄像头mark
+    }
 </script>
 </html>