<!DOCTYPE html>
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
<head>
|
<meta charset="UTF-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<title>Document</title>
|
<link rel="stylesheet" href="../home/lib/font-awesome-4.7.0/css/font-awesome.min.css" />
|
<style type="text/css">
|
* {
|
margin: 0px;
|
padding: 0px;
|
user-select: none;
|
box-sizing: border-box;
|
}
|
|
html,
|
body {
|
width: 100%;
|
height: 100%;
|
}
|
|
#container {
|
height: 100%;
|
display: flex;
|
justify-content: space-between;
|
padding: 10px;
|
background-color: #f3f3f4;
|
}
|
|
.left-wrapper,
|
.right-wrapper {
|
display: inline-block;
|
}
|
|
.left-wrapper {
|
width: 50%;
|
height: 100%;
|
|
}
|
|
.right-wrapper {
|
width: 49%;
|
height: 100%;
|
background-color: white;
|
}
|
|
.card-wrapper {
|
margin-bottom: 10px;
|
}
|
|
.card {
|
display: inline-block;
|
padding: 10px;
|
background-color: white;
|
margin-bottom: 10px;
|
margin-right: 10px;
|
border-radius: 3px;
|
}
|
|
.card-info {
|
display: inline-block;
|
margin-left: 5px;
|
}
|
|
.card-icon {
|
position: relative;
|
bottom: 7px;
|
font-size: 25px;
|
color: #72bf83;
|
}
|
|
.card-label {
|
color: #608eaf;
|
margin-bottom: 8px;
|
}
|
|
.table-wrapper {
|
padding: 10px;
|
background-color: white;
|
}
|
|
.yantu-table {
|
width: 100%;
|
border-collapse: collapse;
|
}
|
|
.yantu-table td {
|
border: 1px solid gray;
|
padding: 10px;
|
}
|
|
.yantu-table tr:nth-child(odd) {
|
background-color: rgb(249, 249, 249);
|
}
|
|
.table-title{
|
margin-bottom: 8px;
|
}
|
|
.table-title-icon{
|
color: #2998cd;
|
margin-right: 3px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="container">
|
<div class="left-wrapper">
|
<div class="card-wrapper">
|
<div class="card">
|
<i class="fa fa-gg card-icon" aria-hidden="true"></i>
|
<div class="card-info">
|
<p class="card-label">回次</p>
|
<p th:text="'总进尺(m)：' + ${work.huiciNumber} + ' , 总次数：162'" class="card_val"></p>
|
|
</div>
|
</div>
|
<div class="card">
|
<i class="fa fa-thermometer-full card-icon" aria-hidden="true"></i>
|
<div class="card-info">
|
<p class="card-label">水位</p>
|
<p th:text="'总个数：' + ${work.shuiWeiNumber}" class="card_val"></p>
|
</div>
|
</div>
|
<div class="card">
|
<i class="fa fa-pencil-square-o card-icon" aria-hidden="true"></i>
|
<div class="card-info">
|
<p class="card-label">取样</p>
|
<p th:text="'总个数：' + ${work.quYangNumber}" class="card_val"></p>
|
</div>
|
</div>
|
<div class="card">
|
<i class="fa fa-glass card-icon" aria-hidden="true"></i>
|
<div class="card-info">
|
<p class="card-label">取水</p>
|
<p th:text="'总个数：' + ${work.quShuiNumber}" class="card_val"></p>
|
</div>
|
</div>
|
<div class="card">
|
<i class="fa fa-hand-lizard-o card-icon" aria-hidden="true"></i>
|
<div class="card-info">
|
<p class="card-label">动探</p>
|
<p th:text="'总次数：' + ${work.dongTanNumber}" class="card_val"></p>
|
</div>
|
</div>
|
<div class="card">
|
<i class="fa fa-sign-in card-icon" aria-hidden="true"></i>
|
<div class="card-info">
|
<p class="card-label">标贯</p>
|
<p th:text="'总次数：' + ${work.biaoGuanNumber}" class="card_val"></p>
|
</div>
|
</div>
|
<div class="card">
|
<i class="fa fa-picture-o card-icon" aria-hidden="true"></i>
|
<div class="card-info">
|
<p class="card-label">照片</p>
|
<p th:text="'总个数：' + ${work.zhaoPianNumber}" class="card_val"></p>
|
</div>
|
</div>
|
</div>
|
<div class="table-wrapper">
|
<p class="table-title">
|
<i class="fa table-title-icon fa-bars" aria-hidden="true"></i>
|
<span class="table-title-name">岩土信息列表</span>
|
</p>
|
|
<table class="yantu-table">
|
<tr>
|
<th>总计/岩土类型</th>
|
<th>总进尺（m）</th>
|
<th>总次数</th>
|
</tr>
|
<tr th:each="yantuVo,state:${work.yanTuList}">
|
<td th:text="${yantuVo.frequencyType}"></td>
|
<td th:text="${yantuVo.jinchiCount}"></td>
|
<td th:text="${yantuVo.cishuNumber}"></td>
|
</tr>
|
</table>
|
</div>
|
</div>
|
<div class="right-wrapper">
|
<p style="text-align: center;margin-top: 30px;">图表区域</p>
|
</div>
|
</div>
|
</body>
|
<script th:inline="javascript">
|
|
var work =[[${work}]];
|
console.log(work);
|
</script>
|
|
</html>
|
