177 lines
4.9 KiB
HTML
177 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>智慧用电模块</title>
|
|
<link rel="stylesheet" type="text/css" href="../../css/electricity/electricity.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;
|
|
color: white !important;;
|
|
}
|
|
.container {
|
|
position: relative;
|
|
top: -35.5%;
|
|
left: 0.1%;
|
|
}
|
|
.image {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="left">
|
|
<div class="video">
|
|
<div class="title">
|
|
<span style="padding-left: 10px;">设备概况</span>
|
|
</div>
|
|
<div class="content">
|
|
<div class="color1">
|
|
<span class="count" id="totalNum"></span>
|
|
<span class="status">总数</span>
|
|
</div>
|
|
<div class="color2">
|
|
<span class="count" id="onlineNum"></span>
|
|
<span class="status">在线</span>
|
|
</div>
|
|
<div class="color3">
|
|
<span class="count" id="alarmNum"></span>
|
|
<span class="status">报警</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wisdom">
|
|
<div class="title">
|
|
<span style="padding-left: 10px;">开关状态</span>
|
|
</div>
|
|
<div class="content">
|
|
<div class="color2">
|
|
<span class="count" id="onlineCount"></span>
|
|
<span class="status">在线</span>
|
|
</div>
|
|
<div class="color3">
|
|
<span class="count" id="offlineCount"></span>
|
|
<span class="status">离线</span>
|
|
</div>
|
|
<div class="color1">
|
|
<span class="count" id="total"></span>
|
|
<span class="status">线路数量</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="readLine">
|
|
<div class="title">
|
|
<span style="padding-left: 10px;">线路分布</span>
|
|
</div>
|
|
<div id="chart"></div>
|
|
</div>
|
|
</div>
|
|
<div class="center">
|
|
<div class="electricity">
|
|
<div class="title">
|
|
<span>年度用电情况</span>
|
|
</div>
|
|
<div class="chart">
|
|
<div id="year-chart"></div>
|
|
<div id="year-container"></div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
<div class="electricity1">
|
|
<div class="title">
|
|
<span>近12月用电量</span>
|
|
</div>
|
|
<div id="monthly-chart" 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="interfaceState">-->
|
|
<!-- <div class="title" onclick="interfaceStateClick()"></div>-->
|
|
<!-- <div class="request">-->
|
|
<!-- <span>请求数量 </span>-->
|
|
<!-- <span class="requestNum" id="requestNum" style="color: #30F7FF;"></span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="success">-->
|
|
<!-- <span>成功 </span>-->
|
|
<!-- <span class="successNum" id="successNum" style="color: #93FFB6;"></span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="error">-->
|
|
<!-- <span>异常 </span>-->
|
|
<!-- <span class="errorNum" id="errorNum" style="color: #FF2020;"></span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<div class="dayWarn">
|
|
<div class="title">
|
|
<span style="margin-left: -9%;">异常报警</span>
|
|
</div>
|
|
<div class="contents">
|
|
<div class="device">
|
|
<div class="title" style="background-image: url(../../img/year.png) !important;"></div>
|
|
<div class="contents">
|
|
<span id="totalAlarm">xx</span>
|
|
<span>本年告警</span>
|
|
</div>
|
|
</div>
|
|
<div class="device">
|
|
<div class="title" style="background-image: url(../../img/month.png) !important;"></div>
|
|
<div class="contents">
|
|
<span id="monthNum" style="color: #fba75a">xx</span>
|
|
<span>本月告警</span>
|
|
</div>
|
|
</div>
|
|
<div class="defence">
|
|
<div class="title" style="background-image: url(../../img/day.png) !important;"></div>
|
|
<div class="contents">
|
|
<span id="todayAlarm" style="color: rgb(251, 59, 0)">xx</span>
|
|
<span>今日告警</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="alarmStatus">
|
|
</div>
|
|
<div class="container">
|
|
<img class="image" src="../../img/Frame.png" alt="Your Image">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="defenceWarn">
|
|
<div class="title">
|
|
<span style="margin-left: -9%;">报警信息</span>
|
|
<div title="详情" onclick="defenceWarnDataClick()"></div>
|
|
</div>
|
|
<div class="table">
|
|
<div class="tableList" style="font-size: 14px;font-weight: 600">
|
|
<span>设备名称</span>
|
|
<span>报警类型</span>
|
|
<span>告警信息内容</span>
|
|
<span>处理状态</span>
|
|
<span>报警时间</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="../../js/core/jquery-3.6.0.js"></script>
|
|
<script src="../../js/core/layui2.7.6/layui.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/electricity/electricity.js"></script>
|
|
|
|
</body>
|
|
</html> |