You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
292 lines
11 KiB
292 lines
11 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>智能库房综合管理系统</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|
|
<meta http-equiv="Pragma" content="no-cache" />
|
|
<meta http-equiv="Expires" content="0" />
|
|
<link rel="shortcut icon" type="image/x-icon" href="images/logo.png">
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="iconfont/iconfont.css">
|
|
<link rel="stylesheet" href="css/swiper.min.css">
|
|
<link href="css/style.css" rel="stylesheet" type="text/css">
|
|
<style>
|
|
.swiper-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.swiper-slide {
|
|
width: 940px;
|
|
height: 450px;
|
|
margin-top: 100px;
|
|
}
|
|
.my-bullet{
|
|
display: inline-block;
|
|
width: 26px;
|
|
height: 2px;
|
|
background-color: #c0c4cc;
|
|
opacity: .24;
|
|
position: relative;
|
|
margin: 0 2px;
|
|
}
|
|
.swiper-pagination-bullet-active {
|
|
background-color: #c0c4cc;
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="env-container">
|
|
<div class="env-top-title"></div>
|
|
<div class="current-date"></div>
|
|
<div class="env-main">
|
|
<div class="env-main-left">
|
|
<div class="env-item container-wrap">
|
|
<span class="right-top-line"></span>
|
|
<span class="left-bottom-line"></span>
|
|
<h3><i class="iconfont icon-kongqizhiliangshuju"></i>档案库空气质量数据</h3>
|
|
<ul class="screen-env-list left-top-env">
|
|
</ul>
|
|
</div>
|
|
<div class="env-item container-wrap">
|
|
<span class="right-top-line"></span>
|
|
<span class="left-bottom-line"></span>
|
|
<h3><i class="iconfont icon-loushuijiance"></i>漏水检测</h3>
|
|
<div class="leakage-detection">
|
|
<div class="state-list">
|
|
<span>正常</span>
|
|
<span>报警</span>
|
|
</div>
|
|
<ul class="leakage-list">
|
|
<li class="leakage-item001">
|
|
<p><i class="iconfont icon-weihubaojing"></i>维护报警</p>
|
|
<span class="leakage-state-tip"></span>
|
|
</li>
|
|
<li class="leakage-item002">
|
|
<p><i class="iconfont icon-loushuibaojing"></i>漏水报警</p>
|
|
<span class="leakage-state-tip"></span>
|
|
</li>
|
|
<li class="leakage-item003">
|
|
<p><i class="iconfont icon-ganyingxianduanlie"></i>感应线断裂</p>
|
|
<span class="leakage-state-tip"></span>
|
|
</li>
|
|
<li class="leakage-item004">
|
|
<p><i class="iconfont icon-loushuiweizhi"></i>漏水位置</p>
|
|
<span class="lsLocation"></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<!-- 门禁记录 -->
|
|
<div class="env-item container-wrap">
|
|
<span class="right-top-line"></span>
|
|
<span class="left-bottom-line"></span>
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">
|
|
<i class="iconfont icon-menjinjilu"></i>门禁记录
|
|
</p>
|
|
</h3>
|
|
<table class="table-wrapper" cellpadding="0" cellspacing="8">
|
|
<tr class="table-header">
|
|
<th>时间</th>
|
|
<th>位置</th>
|
|
<th>说明</th>
|
|
</tr>
|
|
</table>
|
|
<div id="scrollTable" class="scrollTable">
|
|
<table class="table-wrapper " cellpadding="0" cellspacing="8">
|
|
<tbody class="table-text" id="fTbody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="env-main-middle">
|
|
<div class="env-3d">
|
|
<div class="banner-top-name">5F 全景图</div>
|
|
<div class="swiper-container">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide">
|
|
<img src="images/largeScreen/screen1.png" alt="" />
|
|
</div>
|
|
<div class="swiper-slide" >
|
|
<img src="images/largeScreen/screen2.png" alt="" />
|
|
</div>
|
|
<div class="swiper-slide" >
|
|
<img src="images/largeScreen/screen3.png" alt="" />
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="images/largeScreen/screen4.png" alt="" />
|
|
</div>
|
|
<div class="swiper-slide" >
|
|
<img src="images/largeScreen/screen5.png" alt="" />
|
|
</div>
|
|
<div class="swiper-slide" >
|
|
<img src="images/largeScreen/screen6.png" alt="" />
|
|
</div>
|
|
<div class="swiper-slide" >
|
|
<img src="images/largeScreen/screen7.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
<ul class="screen-env-list middle-env">
|
|
</ul>
|
|
</div>
|
|
<div class="middle-bottom">
|
|
<div class="env-item container-wrap middle-bottom-l">
|
|
<span class="right-top-line"></span>
|
|
<span class="left-bottom-line"></span>
|
|
<ul>
|
|
<li>
|
|
<div class="row-item">
|
|
<i class="row-icon row-icon1"></i>
|
|
<span>馆藏总量</span>
|
|
</div>
|
|
<div class="card-panel-text">
|
|
<p class="row-num" id="archivesNum"><b class="timer" data-to="0" data-speed="800"></b></p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="row-item">
|
|
<i class="row-icon row-icon2"></i>
|
|
<span>文件数量</span>
|
|
</div>
|
|
<div class="card-panel-text">
|
|
<p id="filesNum" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="row-item">
|
|
<i class="row-icon row-icon3"></i>
|
|
<span>案卷数量</span>
|
|
</div>
|
|
<div class="card-panel-text">
|
|
<p id="anjuanNum" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<ul>
|
|
<li>
|
|
<div class="row-item">
|
|
<i class="row-icon row-icon4"></i>
|
|
<span>全部设备</span>
|
|
</div>
|
|
<div class="card-panel-text">
|
|
<p id="deviceTotal" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="row-item">
|
|
<i class="row-icon row-icon5"></i>
|
|
<span>在线设备</span>
|
|
</div>
|
|
<div class="card-panel-text">
|
|
<p id="lineDevNum" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="row-item">
|
|
<i class="row-icon row-icon6"></i>
|
|
<span>离线设备</span>
|
|
</div>
|
|
<div class="card-panel-text">
|
|
<p id="offlineDevice" class="row-num"><b class="timer" data-to="0" data-speed="800"></b></p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="env-item container-wrap middle-bottom-r">
|
|
<span class="right-top-line"></span>
|
|
<span class="left-bottom-line"></span>
|
|
<ul>
|
|
<li>
|
|
<span>日借阅量</span>
|
|
<div id="tnum1" class="num"></div>
|
|
</li>
|
|
<li><span>日归还量</span>
|
|
<div id="tnum2" class="num"></div>
|
|
</li>
|
|
<li><span>月借阅量</span>
|
|
<div id="tnum3" class="num"></div>
|
|
</li>
|
|
<li><span>月归还量</span>
|
|
<div id="tnum4" class="num"></div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="env-main-right">
|
|
<div class="env-item container-wrap">
|
|
<span class="right-top-line"></span>
|
|
<span class="left-bottom-line"></span>
|
|
<h3>
|
|
<i class="iconfont icon-danganjieyue"></i>档案借阅
|
|
</h3>
|
|
<div id="chart1" class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
</div>
|
|
</div>
|
|
<div class="env-item container-wrap">
|
|
<span class="right-top-line"></span>
|
|
<span class="left-bottom-line"></span>
|
|
<h3>
|
|
<i class="iconfont icon-danganleixing"></i>档案类型
|
|
</h3>
|
|
<div id="chart2" class="chart-wrapper" style="height: calc(100% - 40px);">
|
|
</div>
|
|
<!-- <div class="empty-main">
|
|
<svg-icon icon-class="empty" class-name="empty-img" />
|
|
<i></i>
|
|
<p>暂无数据</p>
|
|
</div> -->
|
|
</div>
|
|
<!-- 报警记录 -->
|
|
<div class="env-item container-wrap">
|
|
<span class="right-top-line"></span>
|
|
<span class="left-bottom-line"></span>
|
|
<h3 class="table-title">
|
|
<p class="title-arrow">
|
|
<i class="iconfont icon-baojingjilu"></i>报警记录
|
|
</p>
|
|
</h3>
|
|
<!--表格渲染-->
|
|
<table class="table-wrapper" cellpadding="0" cellspacing="8">
|
|
<tr class="table-header">
|
|
<th>时间</th>
|
|
<th>库房</th>
|
|
<th>警情</th>
|
|
</tr>
|
|
</table>
|
|
<div id="scrollTable2" class="scrollTable">
|
|
<table class="table-wrapper" cellpadding="0" cellspacing="8">
|
|
<tbody class="table-text" id="fTbody2">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
|
|
<script type="text/javascript" src="/js/echarts.js"></script>
|
|
<script type="text/javascript" src="/js/flexible.js"></script>
|
|
<script type="text/javascript" src="/iconfont/iconfont.js"></script>
|
|
<script type="text/javascript" src="/js/jquery.countTo.js"></script>
|
|
<script type="text/javascript" src="/js/swiper.min.js"></script>
|
|
<script type="text/javascript" src="/js/countTo.js"></script>
|
|
<script type="text/javascript" src="/js/number.js"></script>
|
|
<script type="text/javascript" src="/js/util.js"></script>
|
|
<script type="text/javascript" src="/js/lendAcross.js"></script>
|
|
<script type="text/javascript" src="/js/typePie.js"></script>
|
|
<script type="text/javascript" src="/js/index.js"></script>
|
|
|
|
</html>
|