2023-12-05

src/main/java/com/ces/web/wjc/controller/WJCController.java

 package com.ces.web.wjc.controller;
 
 import com.ces.common.constant.Constant;
-import com.ces.common.core.domain.Result;
-import com.ces.web.device.service.IDeviceService;
 import org.apache.shiro.authz.annotation.RequiresRoles;
-import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.ResponseBody;
 import org.springframework.web.servlet.ModelAndView;
 
 /**
@@ -17,42 +12,31 @@ import org.springframework.web.servlet.ModelAndView;
  */
 @Controller
 @RequestMapping("/wjc")
+@RequiresRoles({Constant.RoleCode.WJC})
 public class WJCController {
-    @Autowired
-    private IDeviceService deviceService;
 
     @GetMapping
     public ModelAndView njIndex() {
         return new ModelAndView("wjc/areaPlan");
     }
 
-    @GetMapping("/jcqy")
-    @RequiresRoles({Constant.RoleCode.WJC})
-    public ModelAndView jcqyIndex(String buildName) {
-        ModelAndView mv = new ModelAndView("wjc/commonmodel");
-        mv.addObject("buildName", buildName);
-        mv.addObject("floorDeviceCnt",deviceService.getCntByPrisonNameAndBuildName("沪-五",buildName));
-        return mv;
+    @GetMapping("/east")
+    public ModelAndView eastIndex() {
+        return new ModelAndView("wjc/east");
     }
 
-    /**
-     * 获取所有楼层及监控数量信息
-     * @param buildName 大楼名称
-     */
-    @GetMapping("/getCntByBuildName")
-    @RequiresRoles({Constant.RoleCode.WJC})
-    public Result getCntByBuildName(String buildName) {
-        return Result.success(deviceService.getCntByPrisonNameAndBuildName("沪-五",buildName));
+    @GetMapping("/north")
+    public ModelAndView northIndex() {
+        return new ModelAndView("wjc/north");
     }
 
-    /**
-     * 获取楼层的监控信息
-     * @param buildName 大楼名称
-     */
-    @GetMapping("/getGbidByBuildNameAndFloor")
-    @RequiresRoles({Constant.RoleCode.WJC})
-    @ResponseBody
-    public Result getGbidByBuildNameAndFloor(String buildName,String floor) {
-        return Result.success(deviceService.getGbidByPrisonNameAndBuildNameAndFloor("沪-五",buildName,floor));
+    @GetMapping("/zhl")
+    public ModelAndView zhlIndex() {
+        return new ModelAndView("wjc/zhl");
+    }
+
+    @GetMapping("/dxyl")
+    public ModelAndView dxylIndex() {
+        return new ModelAndView("wjc/dxyl");
     }
 }

src/main/webapp/WEB-INF/views/wjc/areaPlan.jsp

@@ -36,18 +36,18 @@
                 <div class="left-menu">
                     <ul>
                         <li>
-                            <a href="${ctx}/wjc/jcqy?buildName=东">
+                            <a href="${ctx}/wjc/east">
                                 <div class="menu-mc">
                                     <span>东</span>
                                 </div>
                                 <div class="menu-num">
                                     <span>监控点</span>
-                                    <span style="background-color: #ff6363;">230</span>
+                                    <span style="background-color: #ff6363;">74</span>
                                 </div>
                             </a>
                         </li>
                         <li>
-                            <a href="${ctx}/wjc/jcqy?buildName=南">
+                            <a href="${ctx}/wjc/south">
                                 <div class="menu-mc">
                                     <span>南</span>
                                 </div>
@@ -58,35 +58,35 @@
                             </a>
                         </li>
                         <li>
-                            <a href="${ctx}/wjc/jcqy?buildName=北">
+                            <a href="${ctx}/wjc/north">
                                 <div class="menu-mc">
                                     <span>北</span>
                                 </div>
                                 <div class="menu-num">
                                     <span>监控点</span>
-                                    <span style="background-color: #43e04e;">204</span>
+                                    <span style="background-color: #43e04e;">52</span>
                                 </div>
                             </a>
                         </li>
                         <li>
-                            <a href="${ctx}/wjc/jcqy?buildName=综合楼">
+                            <a href="${ctx}/wjc/zhl">
                                 <div class="menu-mc">
                                     <span>综合楼</span>
                                 </div>
                                 <div class="menu-num">
                                     <span>监控点</span>
-                                    <span style="	background-color: #2f8fff;">23</span>
+                                    <span style="	background-color: #2f8fff;">20</span>
                                 </div>
                             </a>
                         </li>
                         <li>
-                            <a href="${ctx}/wjc/jcqy?buildName=东习艺楼">
+                            <a href="${ctx}/wjc/dxyl">
                                 <div class="menu-mc">
                                     <span>东习艺楼</span>
                                 </div>
                                 <div class="menu-num">
                                     <span>监控点</span>
-                                    <span style="background-color: #ff6363;">62</span>
+                                    <span style="background-color: #ff6363;">27</span>
                                 </div>
                             </a>
                         </li>
@@ -130,33 +130,33 @@
                 <div class="area-box">
                     <ul>
                         <li class="a_floor">
-                            <a href="${ctx}/wjc/jcqy?buildName=东">
+                            <a href="${ctx}/wjc/east">
                                 <img src="${ctx}/static/images/A_floor.png"/>
                                 <span>东</span>
                             </a>
                         </li>
 
                         <li class="bg1_floor">
-                            <a href="${ctx}/wjc/jcqy?buildName=南">
+                            <a href="${ctx}/wjc/south">
                                 <img src="${ctx}/static/images/bgq_floor.png"/>
                                 <span>南</span>
                             </a>
                         </li>
 
                         <li class="b_floor">
-                            <a href="${ctx}/wjc/jcqy?buildName=北">
+                            <a href="${ctx}/wjc/north">
                                 <img src="${ctx}/static/images/B_floor.png"/>
                                 <span>北</span>
                             </a>
                         </li>
                         <li class="g_floor">
-                            <a href="${ctx}/wjc/jcqy?buildName=综合楼">
+                            <a href="${ctx}/wjc/zhl">
                                 <img src="${ctx}/static/images/G_floor.png"/>
                                 <span>综合楼</span>
                             </a>
                         </li>
                         <li class="c_floor">
-                            <a href="${ctx}/wjc/jcqy?buildName=东习艺楼">
+                            <a href="${ctx}/wjc/dxyl">
                                 <img src="${ctx}/static/images/C_floor.png"/>
                                 <span>东习艺楼</span>
                             </a>

src/main/webapp/WEB-INF/views/wjc/commonmodel.jsp

-<%@ page contentType="text/html;charset=UTF-8" language="java" %>
-<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
-<jsp:include page="../base.jsp"/>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <script src="${ctx}/static/js/jquery-1.8.1.min.js" type=text/javascript></script>
-  <script src="${ctx}/static/js/rem.js"></script>
-  <script src="${ctx}/static/js/jquery.min.js"></script>
-  <script src="${ctx}/static/js/popper.min.js"></script>
-  <script src="${ctx}/static/js/bootstrap.min.js"></script>
-  <link rel="stylesheet" type="text/css" href="${ctx}/static/css/bootstrap.min.css" />
-  <link rel="stylesheet" type="text/css" href="${ctx}/static/css/modal.css" />
-  <link rel="stylesheet" type="text/css" href="${ctx}/static/css/common.css" />
-  <link rel="stylesheet" type="text/css" href="${ctx}/static/css/workshop.css" />
-  <link rel="stylesheet" type="text/css" href="${ctx}/static/css/commonArea.css" />
-  <title>上海市人民检察院</title>
-</head>
-<style type="text/css">
-  .content {
-    background: url('${ctx}/static/images/bg.jpg') no-repeat;
-    width: 100%;
-    min-height: 100vh;
-    /*  background-position-x: center; */
-    background-size: cover;
-  }
-
-  .padding_box {
-    padding: 0.12rem 0.7rem
-  }
-</style>
-<script>
-  $(function () {
-    let buildName = '${buildName}';
-    //var floorsCameraCounts = [60, 25, 24, 3];
-    // 摄像头位置的数组
-    var upperArr = [{
-      top: '0.4rem',
-      left: '0.5rem'
-    }, {
-      top: '0.4rem',
-      left: '1.8rem'
-    }, {
-      top: '0.2rem',
-      left: '3.2rem'
-    }, {
-      top: '0.2rem',
-      left: '4.6rem'
-    }, {
-      top: '0.2rem',
-      left: '6rem'
-    }, {
-      top: '0.2rem',
-      left: '7.4rem'
-    }, {
-      top: '0.2rem',
-      left: '8.8rem'
-    }, {
-      top: '0.4rem',
-      left: '10.2rem'
-    }, {
-      top: '0.4rem',
-      left: '11.6rem'
-    }, {
-      top: '1.6rem',
-      left: '0.5rem'
-    }, {
-      top: '1.6rem',
-      left: '1.8rem'
-    }, {
-      top: '1.6rem',
-      left: '3.2rem'
-    }, {
-      top: '1.6rem',
-      left: '4.6rem'
-    }, {
-      top: '1.6rem',
-      left: '6rem'
-    }, {
-      top: '1.6rem',
-      left: '7.4rem'
-    }, {
-      top: '1.6rem',
-      left: '8.8rem'
-    }, {
-      top: '1.6rem',
-      left: '10.2rem'
-    }, {
-      top: '1.6rem',
-      left: '11.6rem'
-    }, {
-      top: '2.5rem',
-      left: '0.5rem'
-    }, {
-      top: '2.5rem',
-      left: '1.8rem'
-    }, {
-      top: '2.5rem',
-      left: '3.2rem'
-    }, {
-      top: '2.5rem',
-      left: '4.6rem'
-    }, {
-      top: '2.5rem',
-      left: '6rem'
-    }, {
-      top: '2.5rem',
-      left: '7.4rem'
-    }, {
-      top: '2.5rem',
-      left: '8.8rem'
-    }, {
-      top: '2.5rem',
-      left: '10.2rem'
-    }];
-    var centreArr = [
-      {
-        top: '2.5rem',
-        left: '10.2rem'
-      },
-      {
-        top: '3.2rem',
-        left: '0.5rem'
-      }, {
-        top: '3.2rem',
-        left: '1.8rem'
-      }, {
-        top: '3.2rem',
-        left: '3.2rem'
-      }, {
-        top: '3.2rem',
-        left: '4.6rem'
-      }, {
-        top: '3.2rem',
-        left: '6rem'
-      }, {
-        top: '3.2rem',
-        left: '7.4rem'
-      }, {
-        top: '3.2rem',
-        left: '8.8rem'
-      }, {
-        top: '3.2rem',
-        left: '10.2rem'
-      }, {
-        top: '3.2rem',
-        left: '11.3rem'
-      },
-      {
-        top: '4.2rem',
-        left: '2.5rem'
-      }, {
-        top: '4.2rem',
-        left: '4rem'
-      }, {
-        top: '4.2rem',
-        left: '7rem'
-      }, {
-        top: '3.2rem',
-        left: '11.3rem'
-      },
-
-      {
-        top: '4.9rem',
-        left: '0.5rem'
-      }, {
-        top: '4.9rem',
-        left: '1.8rem'
-      }, {
-        top: '4.9rem',
-        left: '3.2rem'
-      }, {
-        top: '4.9rem',
-        left: '4.6rem'
-      }, {
-        top: '4.9rem',
-        left: '6rem'
-      }, {
-        top: '4.9rem',
-        left: '7.4rem'
-      }, {
-        top: '4.9rem',
-        left: '8.8rem'
-      }, {
-        top: '4.9rem',
-        left: '10.2rem'
-      }, {
-        top: '4.9rem',
-        left: '11.3rem'
-      },
-    ]
-    var belowArr = [
-      {
-        top: '6rem',
-        left: '0.5rem'
-      }, {
-        top: '6rem',
-        left: '1.8rem'
-      }, {
-        top: '6rem',
-        left: '6rem'
-      }, {
-        top: '6rem',
-        left: '4.6rem'
-      }, {
-        top: '6rem',
-        left: '6rem'
-      }, {
-        top: '6rem',
-        left: '7.4rem'
-      }, {
-        top: '6rem',
-        left: '8.8rem'
-      }, {
-        top: '6rem',
-        left: '10.2rem'
-      }, {
-        top: '6rem',
-        left: '11.5rem'
-      },
-      {
-        top: '7rem',
-        left: '1.8rem'
-      }, {
-        top: '7rem',
-        left: '3.4rem'
-      }, {
-        top: '7rem',
-        left: '10.2rem'
-      }, {
-        top: '7rem',
-        left: '11.5rem'
-      },
-      {
-        top: '7rem',
-        left: '7.4rem'
-      },
-      {
-        top: '7rem',
-        left: '1.8rem'
-      }, {
-        top: '7rem',
-        left: '3.4rem'
-      }, {
-        top: '7rem',
-        left: '10.2rem'
-      }, {
-        top: '7rem',
-        left: '11.5rem'
-      },
-      {
-        top: '7rem',
-        left: '7.4rem'
-      }
-    ];
-    // 更新摄像头视图的函数
-    function updateCameras(floor,count) {
-      // 计算要显示的摄像头数量
-      //var camerasCount = floorsCameraCounts[index];
-      var camerasCount = count;
-
-      // 获取并更新监控点的数字
-      //$('.monitor').eq(index).find('span').text(camerasCount);
-
-      // 生成一个随机的起始索引
-      // var randomStartIndex = Math.floor(Math.random() * (arr.length - camerasCount + 1));
-      // 从arr中获取当前楼层的摄像头位置，从随机的起始索引开始
-      // var selectedCameras = arr.slice(randomStartIndex, randomStartIndex + camerasCount);
-      $.ajax({
-        type : 'get',
-        url : "${ctx}/wjc/getGbidByBuildNameAndFloor?buildName="+buildName+"&floor="+floor,
-        dataType : "json",
-        success : function(result) {
-          if(result.code=='200'){
-            var data = result.data;
-            var selectedCameras = [];
-            let number = parseInt(camerasCount /3);
-            upperNmuber = parseInt(number + (camerasCount % 3));
-            let upperList = myRandom(upperArr, upperNmuber).filter(it=>it).map(it=>it);
-            let centreList = myRandom(centreArr, number).filter(it => it).map(it => it);
-            let belowList = myRandom(belowArr, number).filter(it => it).map(it => it);
-            selectedCameras = [...upperList,...centreList,...belowList];
-            for (var i=0;i<data.length;i++){
-              selectedCameras[i].gbId = data[i];
-            }
-            // 创建新的HTML内容
-            var htmlTxt = '<img class="bg_img" src="${ctx}/static/images/commonplan.png" alt="">';
-            $.each(selectedCameras, function (i, camera) {
-              htmlTxt += '<img class="camera" src="${ctx}/static/images/camera.png" ' +
-                      'style="top:' + camera.top + ';left:' + camera.left + '" ' +
-                      'onclick="handleClick(\'' + camera.gbId + '\')"></img>';
-            });
-            // 更新DOM元素
-            $('.room_box').html(htmlTxt);
-          }
-        }
-        ,error : function(XMLHttpRequest, textStatus, errorThrown) {
-        }
-      });
-
-    }
-    function myRandom(arr, length) {
-      var newArr = []; // 组成的新数组初始化
-      for (var i = 0; i < length; i++) {
-        var index = Math.floor(Math.random() * arr.length);
-        var item = arr[index];
-        newArr.push(item)
-      }
-      return newArr.reverse()
-    }
-
-    // 点击事件绑定到楼层标签
-    $(".tab_list").on("click", "li", function () {
-      var $this = $(this);
-      var index = $this.index();
-      // 更新显示的楼层数字
-      $this.addClass('current').siblings().removeClass('current');
-      // 更新监控点和摄像头
-      var floor = $(this).find("p").first().html();
-      var count =  $(this).find("span").html();
-      updateCameras(floor,count);
-    });
-
-    // 页面加载时默认选中第一个楼层
-    $(".tab_list li").first().click();
-  });
-
-  // 点击摄像头时的处理函数
-  function handleClick(gbid) {
-    console.log('Clicked camera', gbid);
-    VideoPlayer.show(gbid);
-  }
-</script>
-
-
-
-<body>
-  <div class="content">
-    <div class="content_top"></div>
-    <div class="flex-box padding_box">
-      <div class="menu_box">
-        <div class="menu_title_box"><a class="menu_name" href="${ctx}/wjc">${buildName}</a></div>
-        <div class="tab_list">
-          <ul>
-            <c:forEach items="${floorDeviceCnt}" var="i">
-              <li class="current">
-                <div class="flex-box">
-                  <p>${i.floor}</p>
-                  <p class="monitor">监控点<span>${i.count}</span></p>
-                </div>
-              </li>
-            </c:forEach>
-          </ul>
-        </div>
-      </div>
-      <div class="content_box">
-        <div class="room_box">
-
-        </div>
-      </div>
-    </div>
-  </div>
-</body>
-
-</html>
\ No newline at end of file

src/main/webapp/WEB-INF/views/wjc/dxyl.jsp

+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ include file="../base.jsp" %>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>东习艺楼</title>
+</head>
+<style type="text/css">
+    .content {
+        background: url('${ctx}/static/images/bg.jpg') center center no-repeat;
+        width: 100%;
+        height: 100%;
+        /*  background-position-x: center; */
+        background-size: cover;
+    }
+</style>
+<body>
+<div class="content">
+    <div class="content_top"></div>
+    <div class=" padding_box2 clearfix">
+        <div class="menu_box">
+            <div class="menu_title_box"><a class="menu_name" href="${ctx}/wjc">东习艺楼</a></div>
+            <div class="tab_list">
+                <ul>
+                    <li class="current">
+                        <div class="flex-box">
+                            <p class="tabName">一楼</p>
+                            <p class="monitor">监控点<span>15</span></p>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="flex-box">
+                            <p class="tabName">二楼</p>
+                            <p class="monitor">监控点<span>12</span></p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="content_box">
+            <div class="room_box">
+
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+
+    let dataList = {
+        'arr1': [
+            {
+                top: '2.3rem',
+                left: '1.6rem',
+                gbid: '31011000001320000842'
+            }, {
+                top: '2.3rem',
+                left: '10.2rem',
+                gbid: '31011000001320000840'
+            }, {
+                top: '2.1rem',
+                left: '3.2rem',
+                gbid: '31011000001320000848'
+            }, {
+                top: '0.3rem',
+                left: '3.2rem',
+                gbid: '31011000001320000844'
+            }, {
+                top: '3.5rem',
+                left: '8.5rem',
+                gbid: '31011000001320000845'
+            }, {
+                top: '2.1rem',
+                left: '8.5rem',
+                gbid: '31011000001320000847'
+            }, {
+                top: '0.3rem',
+                left: '8.5rem',
+                gbid: '31011000001320000843'
+            }, {
+                top: '3.5rem',
+                left: '3.2rem',
+                gbid: '31011000001320000846'
+            }, {
+                top: '5.1rem',
+                left: '9.37rem',
+                gbid: '31011000001320000841'
+            }, {
+                top: '5.1rem',
+                left: '2.35rem',
+                gbid: '31011000001320000852'
+            }, {
+                top: '6.4rem',
+                left: '5.85rem',
+                gbid: '31011000001320000854'
+            }, {
+                top: '7.7rem',
+                left: '5.85rem',
+                gbid: '31011000001320000853'
+            }, {
+                top: '4.1rem',
+                left: '0.35rem',
+                gbid: '31011000001320000849'
+            }, {
+                top: '4.1rem',
+                left: '6rem',
+                gbid: '31011000001320000850'
+            }, {
+                top: '4.1rem',
+                left: '11.55rem',
+                gbid: '31011000001320000851'
+            }
+        ],
+        'arr2': [
+            {
+                top: '2.3rem',
+                left: '1rem',
+                gbid: '31011000001320000867'
+            }, {
+                top: '2.1rem',
+                left: '2.1rem',
+                gbid: '31011000001320000866'
+            }, {
+                top: '0.3rem',
+                left: '2.1rem',
+                gbid: '31011000001320000862'
+            }, {
+                top: '3.5rem',
+                left: '11.4rem',
+                gbid: '31011000001320000863'
+            }, {
+                top: '2.1rem',
+                left: '11.4rem',
+                gbid: '31011000001320000865'
+            }, {
+                top: '0.3rem',
+                left: '11.4rem',
+                gbid: '31011000001320000861'
+            }, {
+                top: '3.5rem',
+                left: '2.1rem',
+                gbid: '31011000001320000864'
+            }, {
+                top: '5.1rem',
+                left: '9.37rem',
+                gbid: '31011000001320000857'
+            }, {
+                top: '5.1rem',
+                left: '2.35rem',
+                gbid: '31011000001320000868'
+            }, {
+                top: '4.4rem',
+                left: '9.4rem',
+                gbid: '31011000001320000869'
+            }, {
+                top: '6.05rem',
+                left: '7.35rem',
+                gbid: '31011000001320000855'
+            }, {
+                top: '6.7rem',
+                left: '1.9rem',
+                gbid: '31011000001320000856'
+            }
+        ]
+    }
+
+    let thisIndex = 1;
+
+    $(function () {
+        // 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
+        $(".tab_list li").click(function () {
+            // 链式编程  当前li添加类，其余兄弟移除类
+            $(this).addClass('current').siblings().removeClass('current');
+            // 2、拿到当前点击的索引号
+            var index = $(this).index();
+            // 3、下面index对应的模块显示，其余的item隐藏
+            $(".tab_con .item").eq(index).show().siblings().hide();
+            updateData(index + 1);
+        })
+        updateData(1);
+    });
+
+    function updateData(index) {
+        console.log(dataList[`arr${"${index}"}`].length)
+        thisIndex = index;
+        //循环数组 打摄像头位置
+        var divElement = document.querySelector('.room_box');
+        let htmlTxt = '<img class="bg_img" src="${ctx}/static/images/xiyilou' + index + '.png" alt="">'
+        for (let i = 0; i < dataList[`arr${"${index}"}`].length; i++) {
+            htmlTxt = htmlTxt + '<img class="camera" src="${ctx}/static/images/camera.png" ' + ' style="top:' + dataList[`arr${"${index}"}`][i].top + ";left:" + dataList[`arr${"${index}"}`][i].left + '" onclick="handleClick(' + i + ')"></img>'
+        }
+        divElement.innerHTML = htmlTxt;
+    }
+
+    function handleClick(i) {
+        let gbId = dataList['arr' + thisIndex][i].gbid;
+        VideoPlayer.show(gbId);
+    }
+</script>
+</body>
+</html>

src/main/webapp/WEB-INF/views/wjc/north.jsp

+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ include file="../base.jsp" %>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>北楼</title>
+</head>
+<style type="text/css">
+    .content {
+        background: url('${ctx}/static/images/bg.jpg') center center no-repeat;
+        width: 100%;
+        height: 100%;
+        /*  background-position-x: center; */
+        background-size: cover;
+    }
+</style>
+<body>
+<div class="content">
+    <div class="content_top"></div>
+    <div class=" padding_box2 clearfix">
+        <div class="menu_box">
+            <div class="menu_title_box"><a class="menu_name" href="${ctx}/wjc">北</a></div>
+            <div class="tab_list">
+                <ul>
+                    <li class="current">
+                        <div class="flex-box">
+                            <p class="tabName">一楼</p>
+                            <p class="monitor">监控点<span>2</span></p>
+                        </div>
+                    </li>
+                    <li>
+                        <div class="flex-box">
+                            <p class="tabName">二楼</p>
+                            <p class="monitor">监控点<span>50</span></p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="content_box">
+            <div class="room_box">
+
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+
+    let dataList = {
+        'arr1': [
+            {
+                top: '7rem',
+                left: '2.3rem',
+                gbid: '31011000001320000023'
+            }, {
+                top: '5.1rem',
+                left: '10.1rem',
+                gbid: '31011000001320000024'
+            }
+        ],
+        'arr2': [
+            {
+                top: '0.5rem',
+                left: '0.61rem',
+                gbid: '31011000001320000026'
+            }, {
+                top: '0.5rem',
+                left: '1.61rem',
+                gbid: '31011000001320000030'
+            }, {
+                top: '0.5rem',
+                left: '2.61rem',
+                gbid: '31011000001320000034'
+            }, {
+                top: '0.5rem',
+                left: '3.55rem',
+                gbid: '31011000001320000038'
+            }, {
+                top: '0.5rem',
+                left: '6.05rem',
+                gbid: '31011000001320000042'
+            }, {
+                top: '0.5rem',
+                left: '7.05rem',
+                gbid: '31011000001320000046'
+            }, {
+                top: '0.5rem',
+                left: '8rem',
+                gbid: '31011000001320000050'
+            }, {
+                top: '0.5rem',
+                left: '9rem',
+                gbid: '31011000001320000054'
+            }, {
+                top: '1.7rem',
+                left: '0.61rem',
+                gbid: '31011000001320000027'
+            }, {
+                top: '1.7rem',
+                left: '1.61rem',
+                gbid: '31011000001320000031'
+            }, {
+                top: '1.7rem',
+                left: '2.61rem',
+                gbid: '31011000001320000035'
+            }, {
+                top: '1.7rem',
+                left: '3.55rem',
+                gbid: '31011000001320000039'
+            }, {
+                top: '1.7rem',
+                left: '6.05rem',
+                gbid: '31011000001320000043'
+            }, {
+                top: '1.7rem',
+                left: '7.05rem',
+                gbid: '31011000001320000047'
+            }, {
+                top: '1.7rem',
+                left: '8rem',
+                gbid: '31011000001320000051'
+            }, {
+                top: '1.7rem',
+                left: '9rem',
+                gbid: '31011000001320000055'
+            }, {
+                top: '3.45rem',
+                left: '0.61rem',
+                gbid: '31011000001320000028'
+            }, {
+                top: '3.45rem',
+                left: '1.61rem',
+                gbid: '31011000001320000032'
+            }, {
+                top: '3.45rem',
+                left: '2.61rem',
+                gbid: '31011000001320000036'
+            }, {
+                top: '3.45rem',
+                left: '3.55rem',
+                gbid: '31011000001320000040'
+            }, {
+                top: '3.45rem',
+                left: '6.05rem',
+                gbid: '31011000001320000044'
+            }, {
+                top: '3.45rem',
+                left: '7.05rem',
+                gbid: '31011000001320000048'
+            }, {
+                top: '3.45rem',
+                left: '8rem',
+                gbid: '31011000001320000052'
+            }, {
+                top: '3.45rem',
+                left: '9rem',
+                gbid: '31011000001320000056'
+            }, {
+                top: '4.6rem',
+                left: '0.61rem',
+                gbid: '31011000001320000029'
+            }, {
+                top: '4.6rem',
+                left: '1.61rem',
+                gbid: '31011000001320000033'
+            }, {
+                top: '4.6rem',
+                left: '2.61rem',
+                gbid: '31011000001320000037'
+            }, {
+                top: '4.6rem',
+                left: '3.55rem',
+                gbid: '31011000001320000041'
+            }, {
+                top: '4.6rem',
+                left: '6.05rem',
+                gbid: '31011000001320000045'
+            }, {
+                top: '4.6rem',
+                left: '7.05rem',
+                gbid: '31011000001320000049'
+            }, {
+                top: '4.6rem',
+                left: '8rem',
+                gbid: '31011000001320000053'
+            }, {
+                top: '4.6rem',
+                left: '9rem',
+                gbid: '31011000001320000057'
+            }, {
+                top: '1.5rem',
+                left: '10.5rem',
+                gbid: '31011000001320000067'
+            }, {
+                top: '1.5rem',
+                left: '4.77rem',
+                gbid: '31011000001320000061'
+            }, {
+                top: '2.6rem',
+                left: '4.77rem',
+                gbid: '31011000001320000072'
+            }, {
+                top: '4.4rem',
+                left: '4.77rem',
+                gbid: '31011000001320000066'
+            }, {
+                top: '2.6rem',
+                left: '9.8rem',
+                gbid: '31011000001320000073'
+            }, {
+                top: '5.1rem',
+                left: '10.1rem',
+                gbid: '31011000001320000024'
+            }, {
+                top: '5.3rem',
+                left: '0.3rem',
+                gbid: '31011000001320000068'
+            }, {
+                top: '5.3rem',
+                left: '3.65rem',
+                gbid: '31011000001320000062'
+            }, {
+                top: '5.3rem',
+                left: '6.75rem',
+                gbid: '31011000001320000064'
+            }, {
+                top: '5.3rem',
+                left: '8.7rem',
+                gbid: '31011000001320000058'
+            }, {
+                top: '6.65rem',
+                left: '3.2rem',
+                gbid: '31011000001320000069'
+            }, {
+                top: '6.65rem',
+                left: '6.3rem',
+                gbid: '31011000001320000063'
+            }, {
+                top: '6.65rem',
+                left: '8.25rem',
+                gbid: '31011000001320000065'
+            }, {
+                top: '6.65rem',
+                left: '8.7rem',
+                gbid: '31011000001320000059'
+            }, {
+                top: '6.65rem',
+                left: '10.6rem',
+                gbid: '31011000001320000060'
+            }, {
+                top: '7rem',
+                left: '2.35rem',
+                gbid: '31011000001320000023'
+            }, {
+                top: '7.3rem',
+                left: '3.1rem',
+                gbid: '31011000001320000074'
+            }, {
+                top: '7.4rem',
+                left: '11.3rem',
+                gbid: '31011000001320000075'
+            }
+        ]
+    }
+
+    let thisIndex = 1;
+
+    $(function () {
+        // 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
+        $(".tab_list li").click(function () {
+            // 链式编程  当前li添加类，其余兄弟移除类
+            $(this).addClass('current').siblings().removeClass('current');
+            // 2、拿到当前点击的索引号
+            var index = $(this).index();
+            // 3、下面index对应的模块显示，其余的item隐藏
+            $(".tab_con .item").eq(index).show().siblings().hide();
+            updateData(index + 1);
+        })
+        updateData(1);
+    });
+
+    function updateData(index) {
+        thisIndex = index;
+        //循环数组 打摄像头位置
+        var divElement = document.querySelector('.room_box');
+        let htmlTxt = '<img class="bg_img" src="${ctx}/static/images/wjc_workshop' + index + '.png" alt="">'
+        for (let i = 0; i < dataList[`arr${"${index}"}`].length; i++) {
+            htmlTxt = htmlTxt + '<img class="camera" src="${ctx}/static/images/camera.png" ' + ' style="top:' + dataList[`arr${"${index}"}`][i].top + ";left:" + dataList[`arr${"${index}"}`][i].left + '" onclick="handleClick(' + i + ')"></img>'
+        }
+        divElement.innerHTML = htmlTxt;
+    }
+
+    function handleClick(i) {
+        let gbId = dataList['arr' + thisIndex][i].gbid;
+        VideoPlayer.show(gbId);
+    }
+</script>
+</body>
+</html>

src/main/webapp/WEB-INF/views/wjc/zhl.jsp

+<%@ page contentType="text/html;charset=UTF-8" language="java" %>
+<%@ include file="../base.jsp" %>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>综合楼</title>
+</head>
+<style type="text/css">
+    .content {
+        background: url('${ctx}/static/images/bg.jpg') center center no-repeat;
+        width: 100%;
+        height: 100%;
+        /*  background-position-x: center; */
+        background-size: cover;
+    }
+</style>
+<body>
+<div class="content">
+    <div class="content_top"></div>
+    <div class=" padding_box2 clearfix">
+        <div class="menu_box">
+            <div class="menu_title_box"><a class="menu_name" href="${ctx}/wjc">综合楼</a></div>
+            <div class="tab_list">
+                <ul>
+                    <li class="current">
+                        <div class="flex-box">
+                            <p class="tabName">一楼</p>
+                            <p class="monitor">监控点<span>20</span></p>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+        </div>
+        <div class="content_box">
+            <div class="room_box">
+
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+
+    let dataList = {
+        'arr1': [
+            {
+                top: '2rem',
+                left: '0.5rem',
+                gbid: '31011000001320001145'
+            }, {
+                top: '1.6rem',
+                left: '1.1rem',
+                gbid: '31011000001320001142'
+            }, {
+                top: '0.7rem',
+                left: '3.1rem',
+                gbid: '31011000001320001146'
+            }, {
+                top: '1.4rem',
+                left: '4.1rem',
+                gbid: '31011000001320001140'
+            }, {
+                top: '1.4rem',
+                left: '5.6rem',
+                gbid: '31011000001320001130'
+            }, {
+                top: '1.4rem',
+                left: '7.4rem',
+                gbid: '31011000001320001138'
+            }, {
+                top: '0.7rem',
+                left: '8.7rem',
+                gbid: '31011000001320001134'
+            }, {
+                top: '2rem',
+                left: '11.25rem',
+                gbid: '31011000001320001132'
+            }, {
+                top: '3.25rem',
+                left: '3.2rem',
+                gbid: '31011000001320001143'
+            }, {
+                top: '3.25rem',
+                left: '3.55rem',
+                gbid: '31011000001320001147'
+            }, {
+                top: '2.25rem',
+                left: '3.55rem',
+                gbid: '31011000001320001148'
+            }, {
+                top: '3.25rem',
+                left: '8.1rem',
+                gbid: '31011000001320001149'
+            }, {
+                top: '2.8rem',
+                left: '9.6rem',
+                gbid: '31011000001320001144'
+            }, {
+                top: '4.5rem',
+                left: '6.3rem',
+                gbid: '31011000001320001136'
+            }, {
+                top: '7.4rem',
+                left: '4.2rem',
+                gbid: '31011000001320001137'
+            }, {
+                top: '3.9rem',
+                left: '11.6rem',
+                gbid: '31011000001320001133'
+            }, {
+                top: '6.3rem',
+                left: '1.2rem',
+                gbid: '31011000001320001131'
+            }, {
+                top: '6.3rem',
+                left: '3.2rem',
+                gbid: '31011000001320001141'
+            }, {
+                top: '6.3rem',
+                left: '7.4rem',
+                gbid: '31011000001320001139'
+            }, {
+                top: '6.3rem',
+                left: '9.95rem',
+                gbid: '31011000001320001135'
+            }
+        ]
+    }
+
+    let thisIndex = 1;
+
+    $(function () {
+        // 1、点击上面的li，当前点击的li添加current类，其余兄弟移除类
+        $(".tab_list li").click(function () {
+            // 链式编程  当前li添加类，其余兄弟移除类
+            $(this).addClass('current').siblings().removeClass('current');
+            // 2、拿到当前点击的索引号
+            var index = $(this).index();
+            // 3、下面index对应的模块显示，其余的item隐藏
+            $(".tab_con .item").eq(index).show().siblings().hide();
+            updateData(index + 1);
+        })
+        updateData(1);
+    });
+
+    function updateData(index) {
+        thisIndex = index;
+        //循环数组 打摄像头位置
+        var divElement = document.querySelector('.room_box');
+        let htmlTxt = '<img class="bg_img" src="${ctx}/static/images/wjc_zonghelou.png" alt="">'
+        for (let i = 0; i < dataList[`arr${"${index}"}`].length; i++) {
+            htmlTxt = htmlTxt + '<img class="camera" src="${ctx}/static/images/camera.png" ' + ' style="top:' + dataList[`arr${"${index}"}`][i].top + ";left:" + dataList[`arr${"${index}"}`][i].left + '" onclick="handleClick(' + i + ')"></img>'
+        }
+        divElement.innerHTML = htmlTxt;
+    }
+
+    function handleClick(i) {
+        let gbId = dataList['arr' + thisIndex][i].gbid;
+        VideoPlayer.show(gbId);
+    }
+</script>
+</body>
+</html>