<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>xxx</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="content">
<div class="index-title"><img src="img/pbg.png" alt="" /></div>
<div class="row height-all">
<div class="col-xs-3 height-all">
<div class="info-box bor modular1">
<div class="info-title">车辆占比</div>
<div
id="option1"
style="width:100%; height: calc(33% - 20px);"
></div>
<div class="info-title">车辆排放趋势</div>
<div
id="option2"
style="width:100%; height: calc(33% - 20px);"
></div>
<div class="info-title">车辆排放实时数据</div>
<div
id="option3"
style="width:100%; height: calc(33% - 20px);"
></div>
<div class="info-tl"></div>
<div class="info-tr"></div>
<div class="info-bl"></div>
<div class="info-br"></div>
</div>
</div>
<div class="col-xs-6 height-all">
<div class="modular3">
<div id="option_map" style="width:100%; height:100%;"></div>
</div>
<div class="info-box bor modular4">
<div class="info-title">环境详细信息</div>
<div class="row height-all">
<div class="col-xs-3 height-all">
<div id="optionb_1" style="width:100%; height:100%;"></div>
</div>
<div class="col-xs-3 height-all">
<div id="optionb_2" style="width:100%; height:100%;"></div>
</div>
<div class="col-xs-3 height-all">
<div id="optionb_3" style="width:100%; height:100%;"></div>
</div>
<div class="col-xs-3 height-all">
<div id="optionb_4" style="width:100%; height:100%;"></div>
</div>
</div>
<div class="info-tl"></div>
<div class="info-tr"></div>
<div class="info-bl"></div>
<div class="info-br"></div>
</div>
</div>
<div class="col-xs-3 height-all">
<div class="info-box bor modular5">
<div class="info-title">扬尘防控六个100%</div>
<div class="right-top">
<div
id="option4"
style="width:100%; height: 100%;"
></div>
<div class="option4-intro">
<span><i style="background:#906ffd;"></i>公路工地（22个）</span>
<span><i style="background:#65d6f5;"></i>公路料场（67个）</span>
<span><i style="background:#f9b455;"></i>港口工地（56个）</span>
<span><i style="background:#7dda70;"></i>港口堆场（8个）</span>
</div>
</div>
<div class="info-title">公路路面作业统计情况
<div class="info-select clearfix">
<select name="sources" id="sources" class="custom-select sources" placeholder="Source Type">
<option value="1">一个月内</option>
<option value="2">两个月内</option>
<option value="3">半年内</option>
<option value="4">一年内</option>
</select>
</div>
</div>
<div class="right-center">
<div id="option5" style="width:100%; height:100%;"></div>
<div class="right-center-circle">
<div id="option6" style="width:100%; height:100%;"></div>
<div class="option6-intro">
<strong>1024</strong>
<span>全市工作时长</span>
</div>
</div>
</div>
<div class="info-title">公路保洁次数统计</div>
<div class="info-progress">
<div class="progress-list clearfix">
<label>芝罘区</label>
<div
class="jgp-progress jgp-progress-line jgp-progress-text-inside"
>
<div class="jgp-progress-bar">
<div class="jgp-progress-bar-outer">
<div
class="jgp-progress-bar-inner progress-bar-1"
style="width: 100%;"
>
<div class="jgp-progress-text">10次</div>
</div>
</div>
</div>
</div>
</div>
<div class="progress-list clearfix">
<label>xxx</label>
<div
class="jgp-progress jgp-progress-line jgp-progress-text-inside"
>
<div class="jgp-progress-bar">
<div class="jgp-progress-bar-outer">
<div
class="jgp-progress-bar-inner progress-bar-2"
style="width: 90%;"
>
<div class="jgp-progress-text">9次</div>
</div>
</div>
</div>
</div>
</div>
<div class="progress-list clearfix">
<label>xxx</label>
<div
class="jgp-progress jgp-progress-line jgp-progress-text-inside"
>
<div class="jgp-progress-bar">
<div class="jgp-progress-bar-outer">
<div
class="jgp-progress-bar-inner progress-bar-3"
style="width: 70%;"
>
<div class="jgp-progress-text">7次</div>
</div>
</div>
</div>
</div>
</div>
<div class="progress-list clearfix">
<label>xxx</label>
<div
class="jgp-progress jgp-progress-line jgp-progress-text-inside"
>
<div class="jgp-progress-bar">
<div class="jgp-progress-bar-outer">
<div
class="jgp-progress-bar-inner progress-bar-4"
style="width: 80%;"
>
<div class="jgp-progress-text">8次</div>
</div>
</div>
</div>
</div>
</div>
<div class="progress-list clearfix">
<label>xxx</label>
<div
class="jgp-progress jgp-progress-line jgp-progress-text-inside"
>
<div class="jgp-progress-bar">
<div class="jgp-progress-bar-outer">
<div
class="jgp-progress-bar-inner progress-bar-5"
style="width: 90%;"
>
<div class="jgp-progress-text">9次</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="info-tl"></div>
<div class="info-tr"></div>
<div class="info-bl"></div>
<div class="info-br"></div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.8.5/extension/bmap.js"></script>
<script
type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=Br3Yh3bHS3M3wNawaZR1kpxDQarmXCh2"
></script>
<script
type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"
></script>
<script
type="text/javascript"
src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"
></script>
<script src="js/glbaojie.js"></script>
<script src="js/index.js"></script>
</body>
</html>