代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>告警分析</title>
<link rel="stylesheet" href="assets/css/common.css">
<link rel="stylesheet" href="assets/css/emergency.css">
<link rel="stylesheet" href="assets/layui/css/layui.css">
<link rel="stylesheet" href="assets/css/reset-layui-style.css?v=33">
</head>
<body>
<div class="main-page">
<div class="page-body flex">
<div class="sub-page-container">
<div class="right-content-wrapper">
<div class="right-content-box">
<div class="cha">
<img src="assets/img/item4.png">
</div>
<ul class="tags">
<!-- <li><</li>
<li>返回</li> -->
<!-- <li> | </li> -->
<li>有组织</li>
<li>></li>
<li>告警分析</li>
</ul>
<!-- 我的页面 -->
<div class="content-section emergency">
<!-- 上部分echarts -->
<div class="main-section">
<div class="card flex">
<span class="card-span">15天告警</span>
</div>
<div class="charts-box line-one">
<!-- echars -->
<div class="chart"></div>
</div>
</div>
<!-- 下部分echarts -->
<!-- echart圆形图 -->
<div class="up-box flex">
<div class="round-box">
<div class="card">
<span class="card-span">月度告警（次）</span>
</div>
<div class="charts-box line-one flex">
<!-- echars -->
<div id="echart"></div>
<div class="information">
<ul>
<li class="information-li flex">
<span class="information-span">154</span>
<div class="flex">
<span class="information-icon"></span>
<span class="information-span2">车辆速度</span>
</div>
</li>
<li class="information-li flex">
<span class="information-span">15</span>
<div class="flex">
<span class="information-iconbule"></span>
<span class="information-span2">设备故障</span>
</div>
</li>
<li class="information-li flex">
<span class="information-span">116</span>
<div class="flex">
<span class="information-iconzi"></span>
<span class="information-span2">空气质量</span>
</div>
</li>
</ul>
</div>
<div class="shuju">
<div class="emepng flex">
<span class="emepng-1">最多类型</span>
<span class="emepng-2">设备故障</span>
<span class="emepog-3"></span>
</div>
<div class="emepng flex">
<span class="emepng-1">最多类型</span>
<span class="emepng-2">车辆违规</span>
<span class="emepog-4 "></span>
</div>
</div>
</div>
</div>
<div class="tale-box round-box">
<div class="card">
<span class="card-span">故障诊断</span>
</div>
<div class="card-content">
<table class="table">
<thead>
<tr>
<th>区域</th>
<th>设备名称</th>
<th>故障时间</th>
<th>恢复时间</th>
<th>持续时长（h）</th>
<th>故障类型</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>道路</td>
<td>4#干雾机</td>
<td>2021-03-12</td>
<td>2021-03-12</td>
<td>2分钟</td>
<td class="colocorange">掉线</td>
</tr>
<tr>
<td>道路</td>
<td>4#干雾机</td>
<td>2021-03-12</td>
<td>2021-03-12</td>
<td>2分钟</td>
<td class="colocorange">掉线</td>
</tr>
<tr>
<td>道路</td>
<td>4#干雾机</td>
<td>2021-03-12</td>
<td>2021-03-12</td>
<td>2分钟</td>
<td class="cologreen">掉线</td>
</tr>
<tr>
<td>道路</td>
<td>4#干雾机</td>
<td>2021-03-12</td>
<td>2021-03-12</td>
<td>2分钟</td>
<td class="colocorange">掉线</td>
</tr>
<tr>
<td>道路</td>
<td>4#干雾机</td>
<td>2021-03-12</td>
<td>2021-03-12</td>
<td>2分钟</td>
<td class="cologreen">掉线</td>
</tr>
<tr>
<td>道路</td>
<td>4#干雾机</td>
<td>2021-03-12</td>
<td>2021-03-12</td>
<td>2分钟</td>
<td class="colocorange">掉线</td>
</tr>
<tr>
<td>道路</td>
<td>4#干雾机</td>
<td>2021-03-12</td>
<td>2021-03-12</td>
<td>2分钟</td>
<td class="colocorange">掉线</td>
</tr>
<tr>
<td>道路</td>
<td>4#干雾机</td>
<td>2021-03-12</td>
<td>2021-03-12</td>
<td>2分钟</td>
<td class="colocorange">掉线</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script src="assets/js/jquery.SuperSlide.2.1.3.js"></script>
<script src="assets/layui/layui.js"></script>
<script src="assets/js/browser.js"></script>
<script src="assets/js/select.js"></script>
<script src="assets/js/page.js"></script>
<script src="assets/js/echarts.min.js"></script>
<script src="./assets/js/emergency.js"></script>
<script>
// 渲染左侧菜单树
new LeftSiderMenu({
el: ".sub-page-container",
size: 10,
curMenu: "告警分析",
menus: [{
href: "有组织实时数据.html",
text: "实时监控"
},
{
href: "数据分析.html",
text: "数据分析"
},
{
href: "运行状态.html",
text: "运行状态"
},
{
href: "告警分析.html",
text: "告警分析"
},
]
});
// 渲染底部菜单
new Footer({
el: ".main-page",
curMenu: "有组织",
size: 4,
menus: [{
href: "有组织.html",
text: "有组织"
},
{
href: "无组织.html",
text: "无组织"
},
{
href: "车辆出入.html",
text: "清洁运输"
},
{
href: "视频.html",
text: "视频大厅"
}
]
});
new SelectPlus({
el: ".platfrom",
data: [{
value: "",
text: "烟尘（mg/m³）"
},
{
value: 1,
text: "烟尘（1mg/m³）"
},
{
value: 2,
text: "烟尘（2mg/m³）"
},
{
value: 3,
text: "烟尘（3mg/m³）"
}
],
done: function(row) {
console.log(row);
}
})
layui.use(['laypage', 'laydate'], function() {
let laydate = layui.laydate;
laydate.render({
elem: '#dateBtn',
type: 'datetime',
done: function(value, date) {
$("#date").val(value)
}
});
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手