2D监控

ruoyi-ui/public/monitor/index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2D可视化监控系统</title>
+    <script src="/monitor/js/jquery-3.1.1.min.js"></script>
+    <link rel="stylesheet" href="/monitor/css/style.css">
+</head>
+<body>
+    <!-- 页面标题 -->
+    <h1 id="pageTitle" style="position: absolute; left: 50%; transform: translateX(-50%); margin: 0; padding: 20px 0;">2D可视化监控系统</h1>
+
+    <!-- 报警信息容器 -->
+    <div id="alarm-container" style="position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); width: 600px; height: 40px; background: linear-gradient(135deg, #999999, #777777); border-radius: 8px; box-shadow: 0 4px 15px rgba(153, 153, 153, 0.3); display: block; z-index: 1000; color: white; font-family: 'Microsoft YaHei', sans-serif; overflow: hidden;margin-bottom: 150px;margin-left: -100px">
+        <div style="display: flex; align-items: center; height: 100%; padding: 0 15px;">
+            <div style="font-size: 14px; font-weight: bold; margin-right: 10px; white-space: nowrap;">
+                🚨 <span id="alarm-count">0</span>条报警
+            </div>
+            <div id="alarm-scroll" style="flex: 1; height: 100%; position: relative; overflow: hidden;">
+                <div id="alarm-text" style="position: absolute; top: 50%; left: 0%; transform: translateY(-50%); white-space: nowrap; font-size: 13px;"></div>
+            </div>
+        </div>
+    </div>
+
+    <!-- 主容器，用于放置小方块 -->
+    <div id="main"></div>
+
+    <!-- 弹框 -->
+    <div id="box" style="display: none; position: absolute; z-index: 999; width: 600px; height: 520px; background-color: #fff; border: 2px solid #006666; border-radius: 12px; box-shadow: 0 6px 12px rgba(0, 102, 102, 0.15); padding: 20px; left: 50%; top: 50%; transform: translate(-50%, -50%); cursor: move;">
+        <!-- 拖动标题栏 -->
+        <div id="box-header" style="position: absolute; top: 0; left: 0; right: 0; height: 40px; cursor: move; background: linear-gradient(135deg, #006666 0%, #008080 100%); border-radius: 10px 10px 0 0; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 16px; user-select: none;">
+            设备详情
+        </div>
+        <div onclick="closeBox()" style="cursor: pointer; position: absolute; right: 8px; top: 8px; font-size: 18px; color: white; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.3s ease; background-color: rgba(255, 255, 255, 0.2); z-index: 1000;" onmouseover="this.style.backgroundColor='rgba(255, 255, 255, 0.3)'" onmouseout="this.style.backgroundColor='rgba(255, 255, 255, 0.2)'">×</div>
+        <div id="device-details" style="font-size: 13px; line-height: 1.5; margin-top: 40px;"></div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
+    <!-- 1. 先引入本地的 request.js（路径完全可控，不会错）-->
+    <script src="/monitor/js/request.js"></script>
+    <!-- 2. 再引入你的业务脚本 -->
+    <script src="/monitor/js/main.js"></script>
+    <script src="/monitor/js/index.js"></script>
+    <!-- 3. 调用接口（此时 request 已全局可用）-->
+<!--    <script>-->
+<!--      // 调试：先确认 request 存在-->
+<!--      console.log("全局 request 变量：", window.request);-->
+<!--      // 调用接口-->
+<!--      request({-->
+<!--        url: '/largeScreen/ddj/list',-->
+<!--        method: 'get'-->
+<!--      }).then(response => {-->
+<!--        console.log('接口数据：', response); // 注意：若依接口返回的 data 已被拦截器处理，直接用 response 即可（原 res.data）-->
+<!--      }).catch(error => {-->
+<!--        console.error('请求失败：', error);-->
+<!--      });-->
+<!--    </script>-->
+</body>
+</html>