120 lines
5.1 KiB
HTML
120 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>智慧路灯模块</title>
|
|
<link rel="stylesheet" type="text/css" href="../../css/streetLamp/streetLamp.css" />
|
|
<style>
|
|
.layui-layer {
|
|
background-color: rgba(0, 0, 0, 0) !important;
|
|
background-image: url(../../img/bgSecondLevel.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.layui-layer-title {
|
|
border-bottom: 0px solid #f0f0f0 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="left">
|
|
<div class="wisdom">
|
|
<div class="title">
|
|
<span style="padding-left: 10px;">设备概览</span>
|
|
</div>
|
|
<div class="center">
|
|
<div class="halve">
|
|
<div class="icon" style="background-image: url(../../img/streeLamp/totality.png)"></div>
|
|
<span id="total"></span>
|
|
<span class="pattern">设备总数</span>
|
|
</div>
|
|
<div class="halve">
|
|
<div class="icon" style="background-image: url(../../img/streeLamp/normal.png)"></div>
|
|
<span id="online"></span>
|
|
<span class="pattern">正常设备</span>
|
|
</div>
|
|
<div class="halve">
|
|
<div class="icon" style="background-image: url(../../img/streeLamp/breakdown.png)"></div>
|
|
<span id="offline"></span>
|
|
<span class="pattern">故障设备</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="readLine">
|
|
<div class="title">
|
|
<span style="padding-left: 10px;">近7日用电统计</span>
|
|
</div>
|
|
<div class="sevenDayClass" id="sevenDayElectricity" style="width: 550px;height: 400px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="electricity1">
|
|
<div id="year-chart"></div>
|
|
<div id="year-container"></div>
|
|
</div>
|
|
<div class="electricity2">
|
|
<div class="title">
|
|
<span>近12月用电统计</span>
|
|
</div>
|
|
<div id="yearElectricity" style="width: 550px;height: 420px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="dayWarn">
|
|
<div class="title">
|
|
<span>昨日用电量排名</span>
|
|
</div>
|
|
<div id="powerConsumptionRanking" style="width: 550px;height: 300px;"></div>
|
|
</div>
|
|
<div class="defenceWarn">
|
|
<div class="title">
|
|
<span>定时开关</span>
|
|
<div title="控制管理" onclick="control()"></div>
|
|
</div>
|
|
<!-- <div style="color: white;float: right;">
|
|
<span>控制</span>
|
|
</div> -->
|
|
<div class="center" id="centerContainer">
|
|
<!-- <div class="center_title">-->
|
|
<!-- <div class="icon" style="background-image: url(../../img/streeLamp/closeKey.png)">-->
|
|
<!-- <span class="icon_top" id="streetLightName0">路灯1</span>-->
|
|
<!-- <span class="icon_top1" id="streetLightType0">关闭</span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="icon" style="background-image: url(../../img/streeLamp/openButton.png)">-->
|
|
<!-- <span class="icon_top" id="streetLightName1">路灯1</span>-->
|
|
<!-- <span class="icon_top1" id="streetLightType1">开启</span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="icon" style="background-image: url(../../img/streeLamp/closeKey.png)">-->
|
|
<!-- <span class="icon_top" id="streetLightName2">路灯1</span>-->
|
|
<!-- <span class="icon_top1" id="streetLightType2">关闭</span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="center_title">-->
|
|
<!-- <div class="icon" style="background-image: url(../../img/streeLamp/closeKey.png)">-->
|
|
<!-- <span class="icon_top" id="streetLightName3">路灯1</span>-->
|
|
<!-- <span class="icon_top1" id="streetLightType3">关闭</span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="icon" style="background-image: url(../../img/streeLamp/openButton.png)">-->
|
|
<!-- <span class="icon_top" id="streetLightName4">路灯1</span>-->
|
|
<!-- <span class="icon_top1" id="streetLightType4">开启</span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="icon" style="background-image: url(../../img/streeLamp/closeKey.png)">-->
|
|
<!-- <span class="icon_top" id="streetLightName5">路灯1</span>-->
|
|
<!-- <span class="icon_top1" id="streetLightType5">关闭</span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
</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.js"></script>
|
|
<!--<script src="../../js/core/echarts-v5.4.2/echarts.min.js"></script>-->
|
|
<script src="../../js/core/echarts-v5.4.2/echarts-liquidfill.min.js"></script>
|
|
<script src="../../js/home.js"></script>
|
|
<script src="../../js/streetLamp/streetLamp.js"></script>
|
|
</body>
|
|
</html>
|