128 lines
3.9 KiB
HTML
128 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="css/index.css">
|
|
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
|
|
<!-- <script type="text/javascript" src="js/echarts.min.js"></script> -->
|
|
<script type="text/javascript" src="js/echarts.min.old.js"></script>
|
|
<title>大屏监控</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header-container">
|
|
<div class="tou">
|
|
<div class="zi">数 据 可 视 化 看 板</div>
|
|
<img src="img/tou.png">
|
|
</div>
|
|
<div class="datetime-box">
|
|
<div class="shijian"></div>
|
|
<div class="riqi"></div>
|
|
</div>
|
|
<!-- 服务器设置按钮 -->
|
|
<div class="setting-btn-box">
|
|
<button class="setting-btn" onclick="openSettingModal()">⚙ 服务器设置</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 服务器设置弹窗 -->
|
|
<div class="setting-modal-mask" id="settingModalMask" onclick="closeSettingModal()"></div>
|
|
<div class="setting-modal" id="settingModal">
|
|
<div class="setting-modal-title">服务器设置</div>
|
|
<div class="setting-modal-body">
|
|
<!-- 仓库选择 -->
|
|
<div class="setting-row">
|
|
<div class="setting-label">仓库</div>
|
|
<div class="setting-options" id="warehouseOptions">
|
|
<div class="setting-option" data-value="02" onclick="selectOption('warehouse', this)">二联</div>
|
|
<div class="setting-option" data-value="01" onclick="selectOption('warehouse', this)">三联</div>
|
|
</div>
|
|
</div>
|
|
<!-- 端口选择 -->
|
|
<div class="setting-row">
|
|
<div class="setting-label">端口</div>
|
|
<div class="setting-options" id="typeOptions">
|
|
<div class="setting-option" data-value="1" onclick="selectOption('type', this)">入库端</div>
|
|
<div class="setting-option" data-value="2" onclick="selectOption('type', this)">出库端</div>
|
|
</div>
|
|
</div>
|
|
<!-- 当前生效配置预览 -->
|
|
<div class="setting-preview" id="settingPreview"></div>
|
|
</div>
|
|
<div class="setting-modal-footer">
|
|
<button class="setting-save-btn" onclick="saveSettings()">保 存</button>
|
|
<button class="setting-cancel-btn" onclick="closeSettingModal()">取 消</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-wrapper">
|
|
<div class="lanes-container">
|
|
<!-- Lane 1 -->
|
|
<div class="lane-column">
|
|
<div class="lane-header">1巷道</div>
|
|
<div class="lane-part">
|
|
<div class="divHead">
|
|
<div class="name">任务监控</div>
|
|
<div class="name1"></div>
|
|
</div>
|
|
<div class="part-content" id="lane1"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lane 2 -->
|
|
<div class="lane-column">
|
|
<div class="lane-header">2巷道</div>
|
|
<div class="lane-part">
|
|
<div class="divHead">
|
|
<div class="name">任务监控</div>
|
|
<div class="name1"></div>
|
|
</div>
|
|
<div class="part-content" id="lane2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Lane 3 -->
|
|
<div class="lane-column">
|
|
<div class="lane-header">3巷道</div>
|
|
<div class="lane-part">
|
|
<div class="divHead">
|
|
<div class="name">任务监控</div>
|
|
<div class="name1"></div>
|
|
</div>
|
|
<div class="part-content" id="lane3"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alarm Section -->
|
|
<div class="alarm-section">
|
|
<div class="divHead">
|
|
<div class="name">报警信息</div>
|
|
<div class="name1"></div>
|
|
</div>
|
|
<div class="alarm-list-container" id="alarm-list">
|
|
<ul class="kuang">
|
|
<li>
|
|
<p>任务号</p>
|
|
<p>时间</p>
|
|
<p>类型</p>
|
|
<p>详情</p>
|
|
</li>
|
|
</ul>
|
|
<div class="alarm-content-scroll">
|
|
<ul class="alarm-items">
|
|
<!-- Dynamic content will go here -->
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript" src="js/index.js"></script>
|
|
</body>
|
|
|
|
</html> |