60 lines
3.8 KiB
HTML
60 lines
3.8 KiB
HTML
<!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; 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: 80px;margin-left: -60px">
|
||
<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="/monitor/js/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>
|