<!DOCTYPE html>
|
<html lang="en">
|
<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.0, user-scalable=no">
|
<style>
|
*{
|
margin: 0;
|
padding: 0;
|
}
|
body {
|
-webkit-text-size-adjust: 100%!important;
|
text-size-adjust: 100%!important;
|
-moz-text-size-adjust: 100%!important;
|
}
|
.main{
|
width: 100%;
|
background-color: #f5f7fa;
|
padding:10px 0;
|
}
|
.chartContainer{
|
width:92%;
|
margin-left:4%;
|
height:200px;
|
background-color: #fff;
|
border-radius: 5px;
|
}
|
.info{
|
width:92%;
|
margin-left:4%;
|
height:calc(100% - 230px);
|
background-color: #fff;
|
margin-top: 10px;
|
padding-bottom: 10px;
|
border-radius: 5px;
|
}
|
.info div{
|
display: flex;
|
width: 92%;
|
margin-left: 4%;
|
border-bottom: 1px solid #dddddd;
|
height: 40px;
|
}
|
.info div span{
|
width:100px;
|
color: #797979;
|
font-size: clamp(0.563rem, -2.813rem + 15vw, 0.75rem) !important;
|
line-height: 40px;
|
}
|
.info div p{
|
width:calc(100% - 100px);
|
height:40px;
|
font-size: clamp(0.563rem, -2.813rem + 15vw, 0.75rem) !important;
|
font-weight: bold;
|
line-height: 40px;
|
text-align: right;
|
}
|
.success{
|
color:#21a700
|
}
|
.failed{
|
color:#d80000
|
}
|
.other{
|
color: #e8a849;
|
}
|
.stop{
|
color: lightgray;
|
}
|
.download-link{
|
text-decoration:none;
|
width:80px;
|
height:25px;
|
margin:7.5px 10px;
|
background-color: #0066ff;
|
color:#fff;
|
font-size:clamp(0.563rem, -2.813rem + 15vw, 0.75rem) !important;
|
border:none;
|
border-radius: 3px;
|
line-height: 25px;
|
text-align: center;
|
}
|
.insProduct{
|
overflow-x: scroll;
|
overflow-y: hidden;
|
display: inline-block
|
}
|
.info div:last-child{
|
white-space: nowrap;
|
}
|
</style>
|
</head>
|
<body>
|
<input type="hidden" id="progress" th:value="${progress}">
|
<div class="main">
|
<div class="chartContainer" id="chartContainer" ></div>
|
<div class="info">
|
<div>
|
<span>设备名称</span>
|
<p th:text="${deviceName}"></p>
|
</div>
|
<div>
|
<span>设备编号</span>
|
<p th:text="${deviceCode}"></p>
|
</div>
|
<div>
|
<span>启用时长(年)</span>
|
<p th:text="${usedYears}"></p>
|
</div>
|
<div>
|
<span>设备运行状态</span>
|
<p th:if="${runStatus==0}" class="success">正常</p>
|
<p th:if="${runStatus==1}" class="other">维修</p>
|
<p th:if="${runStatus==2}" class="stop">停用</p>
|
<p th:if="${runStatus==3}" class="failed">报废</p>
|
</div>
|
<div>
|
<span>
|
最近校准日期
|
</span>
|
<input type="hidden" id="downloadUrl" th:value="${downloadUrl}">
|
<a th:href="${downloadUrl}" onclick="return hasDownload()" download="attachment.jpg" rel="noopener noreferrer" class="download-link">证书下载</a>
|
<p th:text="${lastCalibrationDate}"></p>
|
</div>
|
<div>
|
<span>下次校准日期</span>
|
<p th:text="${nextCalibrationDate}"></p>
|
</div>
|
<div>
|
<span>校准总结论</span>
|
<p th:if="${calibrateStatus=='合格'}" class="success" th:text="${calibrateStatus}"></p>
|
<p th:if="${calibrateStatus=='不合格'}" class="failed" th:text="${calibrateStatus}"></p>
|
<p th:if="${calibrateStatus=='其他'}" class="other" th:text="${calibrateStatus}"></p>
|
</div>
|
<div>
|
<span>最近核查日期</span>
|
<p th:text="${lastExamineDate}"></p>
|
</div>
|
<div>
|
<span>下次核查日期</span>
|
<p th:text="${nextExamineDate}"></p>
|
</div>
|
<div>
|
<span>核查总结论</span>
|
<p th:if="${examineStatus=='合格'}" class="success" th:text="${examineStatus}"></p>
|
<p th:if="${examineStatus=='不合格'}" class="failed" th:text="${examineStatus}"></p>
|
<p th:if="${examineStatus=='其他'}" class="other" th:text="${examineStatus}"></p>
|
</div>
|
<div>
|
<span>最近维护日期</span>
|
<p th:text="${maintenanceDate}"></p>
|
</div>
|
<div>
|
<span>下次维护日期</span>
|
<p th:text="${nextMaintenanceDate}"></p>
|
</div>
|
<div>
|
<span>维护类型</span>
|
<p th:text="${maintenanceType}"></p>
|
</div>
|
<div>
|
<span>测量项目</span>
|
<p th:text="${insProduct}" class="insProduct"></p>
|
</div>
|
</div>
|
</div>
|
|
</body>
|
<script th:src="@{/static/js/echarts.js}"></script>
|
<script th:src="@{/static/js/device_qr_show.js}"></script>
|
</html>
|
