<!doctype html>
|
<html lang="en">
|
<head>
|
<meta charset="UTF-8">
|
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
<title>环境检测系统</title>
|
|
<link rel="stylesheet" href="./css/page/single/weather/css/animate.css">
|
<link rel="stylesheet" href="./css/page/single/weather/css/base.css">
|
<link rel="stylesheet" href="./css/page/single/weather/css/table.css">
|
<link rel="stylesheet" href="./css/page/single/weather/css/index.css">
|
|
<script src="js/jquery.min.js"></script>
|
<script src="./js/page/single/weather/echarts.js"></script>
|
<script src="./plugins/layui/layui.js"></script>
|
<script src="./js/page/single/weather/index2.js"></script>
|
</head>
|
<body class="scrollbar-body-y">
|
<div class="home_wrap">
|
|
<div class="navbar_wrap">
|
<div class="navbar-text">环境检测系统名称</div>
|
<div class="date-time" id="dateTime"></div>
|
</div>
|
|
<div class="content_wrap">
|
<div class="left-panel">
|
<div class="panel-title">警告信息</div>
|
<div class="panel-content">
|
<div class="panel-item">
|
<div class="panel-item-title">警告类型情况</div>
|
<div class="chart-wrap">
|
<div class="chart-box" id="jglxqkChart"></div><!--
|
--><div class="chart-legend" id="jglxqkChartLegend"></div>
|
</div>
|
</div>
|
<div class="panel-item">
|
<div class="panel-item-title">警告处理情况</div>
|
<div class="chart-wrap">
|
<div class="chart-box" id="jgclqkChart"></div><!--
|
--><div class="chart-legend" id="jgclqkChartLegend"></div>
|
</div>
|
</div>
|
<div class="panel-item">
|
<div class="panel-item-title">警告列表</div>
|
<div class="table-box hjjc-table">
|
<div class="hjjc-table-head">
|
<table border="0">
|
<colgroup>
|
<col width="35%">
|
<col width="27%">
|
<col width="38%">
|
</colgroup>
|
<thead>
|
<tr>
|
<th>警告名称</th>
|
<th>状态</th>
|
<th>时间</th>
|
</tr>
|
</thead>
|
</table>
|
</div>
|
<div class="hjjc-table-body scrollbar-body-y">
|
<table border="0">
|
<colgroup>
|
<col width="35%">
|
<col width="27%">
|
<col width="38%">
|
</colgroup>
|
|
<tbody>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
<tr>
|
<td>此处警告名称</td>
|
<td>此处状态</td>
|
<td>2021-01-10 19:40</td>
|
</tr>
|
</tbody>
|
</table>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="right-panel">
|
<div class="row-box">
|
<div class="row-item-panel">
|
<div class="panel-item-title">外网气象</div>
|
<div class="panel-item-content">
|
<div class="weather-info">
|
<div class="weather-today">
|
<div class="weather-today-icon"></div>
|
<div class="weather-today-text">晴转多云</div>
|
</div>
|
<div class="weather-details">
|
<div class="details-icon"></div>
|
<div class="details-info">
|
<div class="details-info-label">温度</div>
|
<div class="details-info-text">12/20°C</div>
|
</div>
|
</div>
|
<div class="weather-details">
|
<div class="details-icon"></div>
|
<div class="details-info">
|
<div class="details-info-label">湿度</div>
|
<div class="details-info-text">46%</div>
|
</div>
|
</div>
|
<div class="weather-details">
|
<div class="details-icon"></div>
|
<div class="details-info">
|
<div class="details-info-label">pm2.5</div>
|
<div class="details-info-text">32</div>
|
</div>
|
</div>
|
</div><!--
|
--><div class="air-info">
|
<div class="chart-box" id="kqzsChart"></div>
|
<div class="update-time">10:42更新</div>
|
</div>
|
</div>
|
</div>
|
<div class="row-item-panel">
|
<div class="panel-item-title">烟感明火</div>
|
<div class="panel-item-content">
|
<div class="stats-item">
|
<div class="stats-item-num">正常</div>
|
<div class="stats-item-label">通信状态</div>
|
</div>
|
<div class="icon-electricity"></div>
|
<div class="stats-item">
|
<div class="stats-item-num">正常</div>
|
<div class="stats-item-label">报警状态</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="panel-item">
|
<div class="panel-item-title">环境监控数据</div>
|
<div class="tab-box tab-box-1">
|
<div class="tab-item is_hover is_act" id="box-1">温湿度</div>
|
<div class="tab-item is_hover" id="box-2">气体检测</div>
|
<div class="tab-item is_hover" id="box-3">粉尘防爆</div>
|
<!-- <div class="tab-item is_hover">房间D</div>-->
|
<!-- <div class="tab-item is_hover">房间E</div>-->
|
</div>
|
<div class="panel-item-content">
|
<div class="chart-box" id="jksjsnChart"></div><!--
|
--><div class="stats-group" id="stats-group-1">
|
<div class="stats-item">
|
<div class="stats-item-label" id="name1">温度</div>
|
<div class="stats-item-num" id="value1">12/20°C</div>
|
</div>
|
<div class="stats-item">
|
<div class="stats-item-label" id="name2">湿度</div>
|
<div class="stats-item-num" id="value2">32%</div>
|
</div>
|
<div class="stats-item">
|
<div class="stats-item-label" id="name3">PM2.5</div>
|
<div class="stats-item-num" id="value3">32</div>
|
</div>
|
<div class="stats-item">
|
<div class="stats-item-label" id="name4">二氧化碳</div>
|
<div class="stats-item-num" id="value4">32</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div class="panel-item">
|
<div class="panel-item-title">电气监控数据</div>
|
<div class="tab-box tab-box-2">
|
<div class="tab-item is_hover is_act">电压检测</div>
|
<div class="tab-item is_hover">电流检测</div>
|
<div class="tab-item is_hover">线温检测</div>
|
<div class="tab-item is_hover">功率检测</div>
|
</div>
|
<div class="panel-item-content">
|
<div class="chart-box" id="jksjswChart"></div><!--
|
--><div class="stats-group">
|
<div class="stats-item">
|
<div class="stats-item-label">温度</div>
|
<div class="stats-item-num">12/20°C</div>
|
</div>
|
<div class="stats-item">
|
<div class="stats-item-label">湿度</div>
|
<div class="stats-item-num">32%</div>
|
</div>
|
<div class="stats-item">
|
<div class="stats-item-label">PM2.5</div>
|
<div class="stats-item-num">32</div>
|
</div>
|
<div class="stats-item">
|
<div class="stats-item-label">二氧化碳</div>
|
<div class="stats-item-num">32</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
