shuochen
/
LargeScreenVisualization


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486
							
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/echarts.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/macarons.js"></script>
  <script src="js/china.js"></script>
  <script src="js/countUp.js"></script>
  <script src="js/data01.js"></script>
</head>
<body>
    <ul class="nav">
    
      <li class="drop-down">
        <a href="#"></a>
    
<!--         <ul class="drop-down-content">
    
          <li>
            <a href="./home.html">自动切换</a>
          </li>
    
          <li>
            <a href="./index.html">第一屏</a>
          </li>
    
          <li>
            <a href="./second.html">第二屏</a>
          </li>
          <li>
            <a href="./third.html">第三屏</a>
          </li>
    
          <li>
            <a href="./four.html?index=0">第四屏</a>
          </li>
        </ul> -->
      </li>
    </ul>
  <div class="first-screen root-wrap">
    <header>
<!--       <img src="img/title1.png"> -->
      <div>油站监测数据</div>
      <!-- <div class="gifImg">
          <span class="month-tip">2024年6月</span>
      </div> -->
      <!-- <div class="title_img"><img src="img/title_left_img.png" alt=""> </div> -->
    </header>
    <div class="main clearfix">
      <div class="aside-left fl">
        <div class="top left-top">
          <h3>报警记录</h3>
          <div class="tit clearfix">
            <span class="ranking fl"></span>
            <span class="name fl">油站</span>
            <span class="company fl">报警描述</span>
            <span class="hot fl">时间</span>
          </div>
          <div class="">
            <div class="over-wrap">
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">1</span>
                    <span class="name fl">河北高速燕赵驿行集团有限公司</span>
                    <span class="company fl">加油机部件配置不符</span>
                    <span class="hot fl">23/03/30</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">2</span>
                    <span class="name fl">中石化安徽宣城石油分公司</span>
                    <span class="company fl">加油机(监督装置)长期离线</span>
                    <span class="hot fl">23/06/30</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">3</span>
                    <span class="name fl">中石化安徽宣城石油分公司</span>
                    <span class="company fl">加油机计量程序未备案</span>
                    <span class="hot fl">23/07/21</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">4</span>
                    <span class="name fl">中石化安徽宣城金陵加油站</span>
                    <span class="company fl">加油机(监督装置)长期离线</span>
                    <span class="hot fl">23/07/26</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">5</span>
                    <span class="name fl">中石化安徽宣城石油分公司</span>
                    <span class="company fl">加油机计量程序未备案</span>
                    <span class="hot fl">23/08/21</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">6</span>
                    <span class="name fl">广东粤宏石油化工有限公司联营加油站</span>
                    <span class="company fl">加油机监控微处理器程序未备案</span>
                    <span class="hot fl">23/11/28</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">7</span>
                    <span class="name fl">中石化安徽宣城石油分公司</span>
                    <span class="company fl">加油机计量程序未备案</span>
                    <span class="hot fl">23/11/29</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">8</span>
                    <span class="name fl">中国石化贵州黔南龙里龙山加油站</span>
                    <span class="company fl">编码器离线</span>
                    <span class="hot fl">23/11/29</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">9</span>
                    <span class="name fl">中国石化贵州黔南龙里龙山加油站</span>
                    <span class="company fl">加油机部件配置不符</span>
                    <span class="hot fl">23/12/01</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">10</span>
                    <span class="name fl">绍兴袍江中石化加油站</span>
                    <span class="company fl">加油机主板离线</span>
                    <span class="hot fl">23/12/02</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">11</span>
                    <span class="name fl">中石化海盐沈荡加油站</span>
                    <span class="company fl">加油机部件配置不符</span>
                    <span class="hot fl">23/12/05</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">12</span>
                    <span class="name fl">中石化海盐沈荡加油站</span>
                    <span class="company fl">加油机部件配置不符</span>
                    <span class="hot fl">23/12/06</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">13</span>
                    <span class="name fl">河北壳牌石油销售有限公司永清县北环城路加油站</span>
                    <span class="company fl">加油机主板离线</span>
                    <span class="hot fl">23/12/06</span>
                  </div>
                </li>                   
              </ul>
              <ul class="">
                <li class="">
                  <div class="book-rank clearfix">
                    <span class="ranking fl">14</span>
                    <span class="name fl">河北壳牌石油销售有限公司永清县北环城路加油站</span>
                    <span class="company fl">编码器离线</span>
                    <span class="hot fl">23/12/07</span>
                  </div>
                </li>                   
              </ul>
            </div>
          </div>
        </div>
        <div class="bottom left-bottom">
          <div class="bottom-in">
            <h3>维修记录</h3>
            <div class="tit clearfix">
              <span class="ranking fl"></span>
            <span class="name fl">油站</span>
            <span class="company fl">描述</span>
            <span class="hot fl">时间</span>
            </div>
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">1</span>
                  <span class="name fl">恒山型评测试站</span>
                  <span class="company fl">&emsp;</span>
                  <span class="hot fl">24/06/04</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">2</span>
                  <span class="name fl">燕赵驿行西兆通服务区东区</span>
                  <span class="company fl">&emsp;</span>
                  <span class="hot fl">24/04/26</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">3</span>
                  <span class="name fl">燕赵驿行西兆通服务区东区</span>
                  <span class="company fl">&emsp;</span>
                  <span class="hot fl">24/04/26</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">4</span>
                  <span class="name fl">恒山型评测试站</span>
                  <span class="company fl">&emsp;</span>
                  <span class="hot fl">24/03/05</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">5</span>
                  <span class="name fl">中化石油黑龙江有限公司哈尔滨市电碳路加油站</span>
                  <span class="company fl">装置升级更换</span>
                  <span class="hot fl">24/01/25</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">6</span>
                  <span class="name fl">中化石油黑龙江有限公司哈尔滨市电碳路加油站</span>
                  <span class="company fl">装置升级更换</span>
                  <span class="hot fl">24/01/25</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">7</span>
                  <span class="name fl">中化石油黑龙江有限公司哈尔滨市电碳路加油站</span>
                  <span class="company fl">经常两把枪同时报代码“.62”</span>
                  <span class="hot fl">24/01/25</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">8</span>
                  <span class="name fl">中化石油黑龙江有限公司哈尔滨市电碳路加油站</span>
                  <span class="company fl">设备升级</span>
                  <span class="hot fl">24/01/25</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">9</span>
                  <span class="name fl">中化石油黑龙江有限公司哈尔滨市电碳路加油站</span>
                  <span class="company fl">装置升级更换</span>
                  <span class="hot fl">24/01/25</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">10</span>
                  <span class="name fl">恒山型评测试站</span>
                  <span class="company fl">&emsp;</span>
                  <span class="hot fl">23/12/20</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">11</span>
                  <span class="name fl">恒山型评测试站</span>
                  <span class="company fl">&emsp;</span>
                  <span class="hot fl">23/12/19</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">12</span>
                  <span class="name fl">恒山型评测试站</span>
                  <span class="company fl">&emsp;</span>
                  <span class="hot fl">23/12/18</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">13</span>
                  <span class="name fl">恒山型评测试站</span>
                  <span class="company fl">&emsp;</span>
                  <span class="hot fl">23/12/18</span>
                </div>
              </li>                   
            </ul>     
            <ul class="">
              <li class="">
                <div class="book-rank clearfix">
                  <span class="ranking fl">14</span>
                  <span class="name fl">中国石油天然气股份有限公司黑龙江黑河销售分公司第二加油站</span>
                  <span class="company fl">设备升级更换</span>
                  <span class="hot fl">23/12/10</span>
                </div>
              </li>                   
            </ul>     
          </div>
        </div>        
      </div>
      <div class="middle-map fl">
        <div class="map-wrap">
          <h3 class="clearfix">
            <dl class="fl">
              <dt>油站数</dt>
              <dd id="book-data">32</dd>
            </dl>
            <dl class="fl">
              <dt>加油机</dt>
              <dd id="varity-data" >114</dd>
            </dl> 
            <dl class="fl">
              <dt>油枪</dt>
              <dd id="sales-data" >370</dd>
            </dl> 
            <dl class="fl">
              <dt>报警数</dt>
              <dd>12650</dd>
            </dl> 
            <dl class="fl">
              <dt>维修数</dt>
              <dd id="stock-data" >185</dd>
            </dl>                                  
          </h3>
          <span class="title-map">数据地图</span>
          <div id="map" style="width: 100%;height: 100%;"></div>
        </div>         
      </div>
      <div class="aside-right fl">      
        <div class="pie clearfix">
          <div class="pie1 fl">
            <h3>计控主板</h3>
            <div id="pie1" style="width: 100%;height: 80%;"></div>
          </div>
          <div class="pie2 fl">
            <h3>油气回收</h3>
            <div id="pie2" style="width: 100%;height: 80%;"></div>
          </div>             
        </div>
        <div class="area-rank" style="height: 63%;">
          <h3>加油站省份统计</h3>
          <div class="con">
            <ul>
              <li>
                <span class="num">1</span>
                <span class="city-name">河北</span>
                <span class="bar">
                  <b class="bar-in"></b>
                </span>
                <span class="">14</span>
              </li>
              <li>
                <span class="num">2</span>
                <span class="city-name">黑龙江</span> 
                <span class="bar">
                    <b class="bar-in"></b>
                  </span>
                  <span class="rank-value">4</span>                               
              </li>
              <li>
                <span class="num">3</span>
                <span class="city-name">浙江</span> 
                <span class="bar">
                  <b class="bar-in"></b>
                </span>
                <span class="rank-value">4</span>                               
              </li>
              <li>
                <span class="num">4</span>
                <span class="city-name">湖北</span>
                <span class="bar">
                  <b class="bar-in"></b>
                </span>
                <span class="rank-value">4</span>                                 
              </li>
              <li>
                <span class="num">5</span>
                <span class="city-name">河南</span>
                <span class="bar">
                  <b class="bar-in"></b>
                </span>
                <span class="rank-value">2</span>              
              </li>
              <li>
                <span class="num">6</span>
                <span class="city-name">安徽</span> 
                <span class="bar">
                  <b class="bar-in"></b>
                </span>
                <span class="rank-value">2</span>                               
              </li>
              <li>
                <span class="num">7</span>
                <span class="city-name">贵州</span>  
                <span class="bar">
                  <b class="bar-in"></b>
                </span>
                <span class="rank-value">1</span>                            
              </li>
              <li>
                <span class="num">8</span>
                <span class="city-name">广东</span>  
                <span class="bar">
                  <b class="bar-in"></b>
                </span>
                <span class="rank-value">1</span>                             
              </li>  
                                                                  
            </ul>
          </div>
        </div>
      <!--   <div class="trend">
          <h3>计控主板统计</h3>
          <div id="trendBar1" style="width: 100%;height: 80%;"></div>
        </div>  -->
      </div>  
    </div>
    <div class="main-bottom">
      <span class="line1"></span>
      <span class="line2"></span>
      <span class="line3"></span>
    </div>
  </div>
  <script src="js/index.js"></script>
  <script src="js/mapIndex.js"></script>
</body>
</html>