feats

resources/static/js/common.js

 var urlPre = "";
 var myModalTrigger;
 const uploadFile = "/uploadFile"
+var TH_SERVER = 'http://192.168.89.147:8087/api'
 window.onload = function() {
 	$('[data-toggle="tooltip"]').tooltip();
 

resources/templates/main/dashboard.html

     }
     
     function loadPage2() {
-      var TH_SERVER = 'http://192.168.89.147:8087/api'
-
       var imageTpl = [
         '<div class="item {active}">',
         '  <div class="item-image" style="background-image: url({src});"></div>',
       ].join('');
 
       $.ajax({
-        url: TH_SERVER+'/banner?pageNum=1&pageSize=20',
+        url: TH_SERVER+'/banner?pageNum=1&pageSize=20&state=1',
         success: function (resp) {
           if (resp.code != 1000) return;
           var list = resp.data.records

resources/templates/station/monitor.html

       </div>
     </div>
     <div class="flex-part monitor-list">
-      <div class="flex-part-0 monitor-item">
-        <div class="monitor-play" data-position="100px" data-toggle="modal" data-target="#monitorModal">
-          <i class="icon icon-play-circle"></i>
-        </div>
-        <h2>#1</h2>
-      </div>
-      <div class="flex-part-0 monitor-item">
-        <div class="monitor-play" data-position="100px" data-toggle="modal" data-target="#monitorModal">
-          <i class="icon icon-play-circle"></i>
-        </div>
-        <h2>大门</h2>
-      </div>
-      <div class="flex-part-0 monitor-item">
-        <h2>厨房</h2>
-      </div>
-      <div class="flex-part-0 monitor-item">
-        <h2>大厅</h2>
-      </div>
-      <div class="flex-part-0 monitor-item">
-        <h2>门卫</h2>
-      </div>
     </div>
 
     <script>
       let player = null;
-      function showMonitorModal() {
+      function showMonitorModal(dom) {
+        const url = dom.getAttribute('data-monitor-url');
+        if (!url) {
+          alert('未找到关联设备');
+          return;
+        };
+
         const canvas = document.createElement('canvas');
         canvas.id = "video-canvas";
         document.querySelector("#monitorModal .modal-content").appendChild(canvas);
-        const url = 'ws://192.168.89.147:8888/ws/rtsp://admin:abcd12345678@192.168.89.203';
-        player = new JSMpeg.Player(url, { canvas: canvas, protocols: [] });
+        const ws = 'ws://192.168.89.147:8888/ws/' + url;
+        player = new JSMpeg.Player(ws, { canvas: canvas, protocols: [] });
       }
 
       function loadPage2() {
-        $('#monitorModal').on('shown.zui.modal', function() {
-          showMonitorModal()
-        });
-        $('#monitorModal').on('hide.zui.modal', function() {
-          player.destroy();
-        });
+
+        var monitroTpl = [
+          '<div class="flex-part-0 monitor-item">',
+          '  <div class="monitor-play" data-monitor-url="{url}" data-position="100px" data-toggle="modal" data-target="#monitorModal">',
+          '    <i class="icon icon-play-circle"></i>',
+          '  </div>',
+          '  <h2>{title}</h2>',
+          '</div>',
+        ].join('');
+
+        $.ajax({
+          url: TH_SERVER+'/monitor?pageNum=1&pageSize=20&status=1',
+          success: function (resp) {
+            if (resp.code != 1000) return;
+            var list = resp.data.records
+            if (list && list.length > 0) {
+              var html = list.map(function(item, index) {
+                var url = item.url || '';
+                var title = item.title || '';
+                return monitroTpl.replace('{url}', url).replace('{title}', title);
+              }).join('');
+
+              $('.monitor-list').children().remove();
+              $('.monitor-list').append(html);
+        
+              $('#monitorModal').on('shown.zui.modal', function(e) {
+                showMonitorModal(e.relatedTarget)
+              });
+              $('#monitorModal').on('hide.zui.modal', function() {
+                player.destroy();
+              });
+            }
+          }
+        })
       }
     </script>
   </div>