|
@@ -0,0 +1,374 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>车辆诊断报告</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ font-family: Arial, sans-serif;
|
|
|
+ }
|
|
|
+
|
|
|
+ h1, h2, h3 {
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 诊断报告标题 */
|
|
|
+ .report-title {
|
|
|
+ font-size: 28px; /* 调整字体大小 */
|
|
|
+ font-weight: bold;
|
|
|
+ color: #365697;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 时间 */
|
|
|
+ .report-time {
|
|
|
+ font-size: 20px; /* 调整字体大小 */
|
|
|
+ color: #365697;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .vehicle-info, .diagnosis-details, .company-info {
|
|
|
+ margin-top: 20px;
|
|
|
+ background-color: #EBF1FA;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .vehicle-info h2{
|
|
|
+ background-color: #406DB7;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 24px; /* 调整字体大小 */
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 10px;
|
|
|
+ width: 120px;
|
|
|
+
|
|
|
+
|
|
|
+ border-bottom-left-radius: 8px;
|
|
|
+ border-bottom-right-radius: 8px;
|
|
|
+ }
|
|
|
+ .fan h3{
|
|
|
+ background-color: #406DB7;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 24px; /* 调整字体大小 */
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px;
|
|
|
+ width: 500px;
|
|
|
+ margin-top: 40px;
|
|
|
+ margin-left: -10px;
|
|
|
+
|
|
|
+ border-top-right-radius: 8px; /* 设置顶部右上角的圆角半径为20像素 */
|
|
|
+ }
|
|
|
+ .diagnosis-details h2, .company-info h2 {
|
|
|
+ background-color: #406DB7;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 24px; /* 调整字体大小 */
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px;
|
|
|
+ width: 120px;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-bottom-left-radius: 8px;
|
|
|
+ border-bottom-right-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ list-style-type: none;
|
|
|
+ padding-left: 0;
|
|
|
+ font-size: 20px; /* 调整字体大小 */
|
|
|
+ color: #e50909;
|
|
|
+ }
|
|
|
+
|
|
|
+ li {
|
|
|
+ margin-bottom: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .diagnosis-details {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .diagnosis-details h2 {
|
|
|
+ margin-top: -10px;
|
|
|
+ align-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .diagnosis-details table, .diagnosis-details th, .diagnosis-details td {
|
|
|
+ border-collapse: collapse;
|
|
|
+ padding: 8px;
|
|
|
+ text-align: left;
|
|
|
+ font-size: 20px; /* 调整字体大小 */
|
|
|
+ color: #000000;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .diagnosis-details th, .diagnosis-details td {
|
|
|
+ border: none;
|
|
|
+ left:500px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .diagnosis-details ul {
|
|
|
+ margin-left: 0; /* 防止默认的列表缩进 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .diagnosis-details ul li {
|
|
|
+ padding-left: 0; /* 防止列表项内的额外缩进 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-info {
|
|
|
+ margin-top: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ background-color: #EBF1FA;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .company-info p {
|
|
|
+ font-size: 20px; /* 调整字体大小 */
|
|
|
+ color: #888888;
|
|
|
+ }
|
|
|
+ .company-info tr {
|
|
|
+ font-size: 20px; /* 调整字体大小 */
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+ .company-info td{
|
|
|
+ color: #888888;
|
|
|
+ font-size: 20px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .vehicle-info table {
|
|
|
+ font-size: 20px; /* 调整车辆信息表格内字体大小 */
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .disclaimer {
|
|
|
+ font-size: 16px; /* 调整字体大小 */
|
|
|
+ color: #888888;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 添加样式以美化页面 */
|
|
|
+ .edit-form {
|
|
|
+ position: fixed;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ background-color: #f9f9f9;
|
|
|
+ padding: 20px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+
|
|
|
+ #vinInput{
|
|
|
+ background-color: #ECF1FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ #yearInput{
|
|
|
+ background-color: #ECF1FA;
|
|
|
+ }
|
|
|
+ #mileageInput{
|
|
|
+ background-color: #ECF1FA;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ </style>
|
|
|
+ <script src="https://wl-resource.obs.cn-south-1.myhuaweicloud.com/static/axios.min.js"></script>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="vehicle-info">
|
|
|
+ <h1 class="report-title">诊断报告</h1>
|
|
|
+ <p class="report-time">- ${reportTime} -</p>
|
|
|
+</div>
|
|
|
+
|
|
|
+<#list controlListMap as controlMap>
|
|
|
+<div class="vehicle-info">
|
|
|
+ <div>
|
|
|
+ <h2>车辆信息</h2>
|
|
|
+ <img src="https://wl-resource.obs.cn-south-1.myhuaweicloud.com/static/img.png"
|
|
|
+ height="30" width="30"
|
|
|
+ style="float: right; margin: 0 0 10px 10px; cursor: pointer;"
|
|
|
+ onclick="editCell()">
|
|
|
+ </div>
|
|
|
+ <table>
|
|
|
+ <tr>
|
|
|
+ <td>车架号:</td>
|
|
|
+ <td id="vin" style="padding-left: 180px">
|
|
|
+ <#if baseMap["车架号"]?has_content>
|
|
|
+ ${baseMap["车架号"]}
|
|
|
+ <#else>
|
|
|
+
|
|
|
+ </#if>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>年款:</td>
|
|
|
+ <td id="year" style="padding-left: 180px">
|
|
|
+ <#if baseMap["年款"]?has_content>
|
|
|
+ ${baseMap["年款"]}
|
|
|
+ <#else>
|
|
|
+
|
|
|
+ </#if>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>里程:</td>
|
|
|
+ <td id="mileage" style="padding-left: 180px">
|
|
|
+ <#if baseMap["里程"]?has_content>
|
|
|
+ ${baseMap["里程"]}
|
|
|
+ <#else>
|
|
|
+
|
|
|
+ </#if>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ <tr>
|
|
|
+ <td>诊断路径:</td>
|
|
|
+ <td style="padding-left: 180px">${baseMap["诊断路径"]}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>报告编号:</td>
|
|
|
+ <td style="padding-left: 180px">${baseMap["报告编号"]}</td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>SN:</td>
|
|
|
+ <td style="padding-left: 180px">${baseMap["SN"]}</td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ </table>
|
|
|
+</div>
|
|
|
+<div class="diagnosis-details">
|
|
|
+ <h2>诊断详情</h2>
|
|
|
+ <div style="display: flex;"><div class="fan"><h3>${controlMap.getName()}</h3></div>
|
|
|
+ <div style="margin-top: 83px;width: 10000px;margin-right: 50px" ><hr color="#406DB7"></div></div>
|
|
|
+ <table>
|
|
|
+ <div class="company-info">
|
|
|
+ <p>故障码(
|
|
|
+ <#if controlMap.getFaultCodeMap()?size != 0 >
|
|
|
+ ${controlMap.getFaultCodeMap()?size}
|
|
|
+ <#else>
|
|
|
+ 0
|
|
|
+ </#if>
|
|
|
+ )</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <ul>
|
|
|
+ <#list controlMap.getFaultCodeMap()?keys as key>
|
|
|
+ <li>${key}:</li>
|
|
|
+ <p></p>
|
|
|
+ </#list>
|
|
|
+ </ul>
|
|
|
+ </td>
|
|
|
+ <td style="padding-left: 180px">
|
|
|
+ <ul>
|
|
|
+ <#list controlMap.getFaultCodeMap()?values as value>
|
|
|
+ <li>${value}</li>
|
|
|
+ <p></p>
|
|
|
+ </#list>
|
|
|
+ </ul>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ <div class="vehicle-info">
|
|
|
+ <p>版本信息(
|
|
|
+ <#if controlMap.getVersionMap()?size != 0 >
|
|
|
+ ${controlMap.getVersionMap()?size}
|
|
|
+ <#else>
|
|
|
+ 0
|
|
|
+ </#if>
|
|
|
+
|
|
|
+ )</p>
|
|
|
+ </div>
|
|
|
+ <table>
|
|
|
+ <#list controlMap.getVersionMap()?keys as key>
|
|
|
+ <tr>
|
|
|
+ <td>${key}</td>
|
|
|
+ <td style="padding-left: 190px">${controlMap.getVersionMap()[key]}</td>
|
|
|
+ </tr>
|
|
|
+ </#list>
|
|
|
+ </table>
|
|
|
+</div>
|
|
|
+</#list>
|
|
|
+
|
|
|
+<div class="company-info">
|
|
|
+ <img src="https://wl-resource.obs.cn-south-1.myhuaweicloud.com/static/img.png" height="30" width="30" style="float: right; margin: 0 0 10px 10px;"/>
|
|
|
+ <table>
|
|
|
+ <tr>
|
|
|
+ <td>公司:</td>
|
|
|
+ <td style="padding-left: 180px">
|
|
|
+ <#if companyMap["公司"]?has_content>
|
|
|
+ ${companyMap["公司"]}
|
|
|
+ <#else>
|
|
|
+
|
|
|
+ </#if>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>电话:</td>
|
|
|
+ <td style="padding-left: 180px">
|
|
|
+ <#if companyMap["电话"]?has_content>
|
|
|
+ ${companyMap["电话"]}
|
|
|
+ <#else>
|
|
|
+
|
|
|
+ </#if>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>地址:</td>
|
|
|
+ <td style="padding-left: 180px">
|
|
|
+ <#if companyMap["地址"]?has_content>
|
|
|
+ ${companyMap["地址"]}
|
|
|
+ <#else>
|
|
|
+
|
|
|
+ </#if>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ </table>
|
|
|
+ <p STYLE="font-size: 15px"><text style="color: red">*</text>该车辆检测报告仅对本次检查结果负责</p>
|
|
|
+</div>
|
|
|
+<script>
|
|
|
+ function editCell() {
|
|
|
+ var vin = document.getElementById('vin');
|
|
|
+ var year = document.getElementById('year');
|
|
|
+ var mileage = document.getElementById('mileage');
|
|
|
+ var vinText = vin.innerText;
|
|
|
+ var yearText = year.innerText;
|
|
|
+ var mileageText = mileage.innerText;
|
|
|
+
|
|
|
+ vin.innerHTML = '<input type="text" id="vinInput" value="' + vinText + '" onblur="saveChanges(\'vin\', this.value)">';
|
|
|
+ year.innerHTML = '<input type="text" id="yearInput" value="' + yearText + '" onblur="saveChanges(\'year\', this.value)">';
|
|
|
+ mileage.innerHTML = '<input type="text" id="mileageInput" value="' + mileageText + '" onblur="saveChanges(\'mileage\', this.value)">';
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function saveChanges(field,value) {
|
|
|
+ if (value==''){
|
|
|
+ return
|
|
|
+ }
|
|
|
+ var input = document.getElementById(field);
|
|
|
+ // 这里可以进行保存操作,比如向服务器发送请求保存数据
|
|
|
+ // 保存完成后可以进行一些提示或其他操作
|
|
|
+ // 使用 Axios 发送 POST 请求
|
|
|
+ axios.post('http://localhost:8888/your/api/endpoint', {
|
|
|
+ type: field,
|
|
|
+ value: value,
|
|
|
+ })
|
|
|
+ .then(function (response) {
|
|
|
+ // 请求成功的处理
|
|
|
+ console.log(response);
|
|
|
+ })
|
|
|
+ // 最后销毁输入框,恢复文本
|
|
|
+ input.innerHTML = value;
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|