110 lines
3.8 KiB
HTML
110 lines
3.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>智慧用水模块</title>
|
|
<link rel="stylesheet" type="text/css" href="../../css/water/water.css" />
|
|
</head>
|
|
<body>
|
|
<div class="left">
|
|
<div class="video">
|
|
<span>雨水回收量统计</span>
|
|
<div id="recycle5" class="title">0</div>
|
|
<div id="recycle4" class="title">0</div>
|
|
<div id="recycle3" class="title">0</div>
|
|
<!-- <span>,</span>-->
|
|
<div id="recycle2" class="title">0</div>
|
|
<div id="recycle1" class="title">0</div>
|
|
<div id="recycle0" class="title">0</div>
|
|
<span>mm</span>
|
|
</div>
|
|
<div class="wisdom">
|
|
<div class="title">
|
|
<span style="padding-left: 10px;">近12月回收水量统计</span>
|
|
</div>
|
|
<div class="middle" id="reclaimedWater"></div>
|
|
<div class="content">
|
|
<div class="color2">
|
|
<span class="count" id="total"></span>
|
|
<span class="status">总数</span>
|
|
</div>
|
|
<div class="color3">
|
|
<span class="count" id="onlineCount"></span>
|
|
<span class="status">运行</span>
|
|
</div>
|
|
<div class="color1">
|
|
<span class="count" id="offlineCount"></span>
|
|
<span class="status">停止</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="readLine">
|
|
<div class="title">
|
|
<span style="padding-left: 10px;">告警信息</span>
|
|
</div>
|
|
<div class="table">
|
|
<div class="tableList" style="font-size: 14px;font-weight: 600">
|
|
<span>设备名称</span>
|
|
<span>区域名称</span>
|
|
<span>告警类型</span>
|
|
<span>告警时间</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="electricity">
|
|
<!-- <div>用水量统计</div>-->
|
|
<div style="display: flex;height: 69%;align-items: center;justify-content: space-around;padding: 1% 0 0 0">
|
|
<span>年用水量统计</span>
|
|
<div id="numberDisplay"></div>
|
|
<div id="yearUse6" class="title">0</div>
|
|
<div id="yearUse5" class="title">0</div>
|
|
<div id="yearUse4" class="title">0</div>
|
|
<div id="yearUse3" class="title">0</div>
|
|
<span>,</span>
|
|
<div id="yearUse2" class="title">0</div>
|
|
<div id="yearUse1" class="title">0</div>
|
|
<div id="yearUse0" class="title">0</div>
|
|
<span>m³</span>
|
|
</div>
|
|
</div>
|
|
<div class="electricity1">
|
|
<div class="title">
|
|
<span>近12月用水统计</span>
|
|
</div>
|
|
<div id="monthly-water" class="chart"></div>
|
|
</div>
|
|
<div class="electricity2">
|
|
<div class="title">
|
|
<span>近7日用水统计</span>
|
|
</div>
|
|
<div id="weekly-chart" class="chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="dayWarn">
|
|
<div class="title">
|
|
<span>今日用水排名</span>
|
|
</div>
|
|
<div class="center" id="waterToday" style="width: 560px;height: 350px"></div>
|
|
</div>
|
|
<div class="defenceWarn">
|
|
<div class="title">
|
|
<span>昨日时间段用水情况</span>
|
|
</div>
|
|
<div id="timePeriodWaterUse" style="width: 560px;height: 350px">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../../js/core/jquery-3.6.0.js"></script>
|
|
<script src="../../js/core/layer-v3.1.0/layer/layer.js"></script>
|
|
<script src="../../js/core/public.js" type="text/javascript"></script>
|
|
<script src="../../js/core/echarts-v5.4.2/echarts.min.js"></script>
|
|
<script src="../../js/core/echarts-v5.4.2/echarts.js"></script>
|
|
<script src="../../js/core/echarts-v5.4.2/echarts-liquidfill.min.js"></script>
|
|
<script src="../../js/water/water.js"></script>
|
|
|
|
</body>
|
|
</html>
|