report.html 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>车辆诊断报告</title>
  7. <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
  8. <style>
  9. body {
  10. font-family: Arial, sans-serif;
  11. }
  12. h1, h2, h3 {
  13. margin-top: 20px;
  14. }
  15. /* 诊断报告标题 */
  16. .report-title {
  17. font-size: 28px; /* 调整字体大小 */
  18. font-weight: bold;
  19. color: #365697;
  20. text-align: center;
  21. }
  22. /* 时间 */
  23. .report-time {
  24. font-size: 20px; /* 调整字体大小 */
  25. color: #365697;
  26. text-align: center;
  27. }
  28. .vehicle-info, .diagnosis-details, .company-info {
  29. margin-top: 20px;
  30. background-color: #EBF1FA;
  31. border-radius: 5px;
  32. padding: 10px;
  33. }
  34. .vehicle-info h2{
  35. background-color: #406DB7;
  36. color: #FFFFFF;
  37. font-size: 24px; /* 调整字体大小 */
  38. font-weight: bold;
  39. text-align: center;
  40. margin: 0 auto;
  41. padding: 10px;
  42. width: 120px;
  43. border-bottom-left-radius: 8px;
  44. border-bottom-right-radius: 8px;
  45. }
  46. .fan h3{
  47. background-color: #406DB7;
  48. color: #FFFFFF;
  49. font-size: 24px; /* 调整字体大小 */
  50. font-weight: bold;
  51. text-align: center;
  52. padding: 10px;
  53. width: 500px;
  54. margin-top: 40px;
  55. margin-left: -10px;
  56. border-top-right-radius: 8px; /* 设置顶部右上角的圆角半径为20像素 */
  57. }
  58. .diagnosis-details h2, .company-info h2 {
  59. background-color: #406DB7;
  60. color: #FFFFFF;
  61. font-size: 24px; /* 调整字体大小 */
  62. font-weight: bold;
  63. text-align: center;
  64. padding: 10px;
  65. width: 120px;
  66. margin: 0 auto;
  67. border-bottom-left-radius: 8px;
  68. border-bottom-right-radius: 8px;
  69. }
  70. ul {
  71. list-style-type: none;
  72. padding-left: 0;
  73. font-size: 20px; /* 调整字体大小 */
  74. color: #e50909;
  75. }
  76. li {
  77. margin-bottom: 5px;
  78. }
  79. .diagnosis-details {
  80. margin-top: 10px;
  81. }
  82. .diagnosis-details h2 {
  83. margin-top: -10px;
  84. align-content: center;
  85. }
  86. .diagnosis-details table, .diagnosis-details th, .diagnosis-details td {
  87. border-collapse: collapse;
  88. padding: 8px;
  89. text-align: left;
  90. font-size: 20px; /* 调整字体大小 */
  91. color: #000000;
  92. }
  93. .diagnosis-details th, .diagnosis-details td {
  94. border: none;
  95. left:500px;
  96. }
  97. .diagnosis-details ul {
  98. margin-left: 0; /* 防止默认的列表缩进 */
  99. }
  100. .diagnosis-details ul li {
  101. padding-left: 0; /* 防止列表项内的额外缩进 */
  102. }
  103. .company-info {
  104. margin-top: 10px;
  105. padding: 10px;
  106. background-color: #EBF1FA;
  107. border-radius: 5px;
  108. }
  109. .company-info p {
  110. font-size: 20px; /* 调整字体大小 */
  111. color: #888888;
  112. }
  113. .company-info tr {
  114. font-size: 20px; /* 调整字体大小 */
  115. color: #000000;
  116. }
  117. .company-info td{
  118. color: #888888;
  119. font-size: 20px;
  120. }
  121. .vehicle-info table {
  122. font-size: 20px; /* 调整车辆信息表格内字体大小 */
  123. }
  124. .disclaimer {
  125. font-size: 16px; /* 调整字体大小 */
  126. color: #888888;
  127. margin-left: 10px;
  128. margin-top: 10px;
  129. }
  130. /* 添加样式以美化页面 */
  131. .edit-form {
  132. position: fixed;
  133. top: 50%;
  134. left: 50%;
  135. transform: translate(-50%, -50%);
  136. background-color: #f9f9f9;
  137. padding: 20px;
  138. border: 1px solid #ccc;
  139. border-radius: 5px;
  140. z-index: 9999;
  141. }
  142. #vinInput{
  143. background-color: #ECF1FA;
  144. }
  145. #yearInput{
  146. background-color: #ECF1FA;
  147. }
  148. #mileageInput{
  149. background-color: #ECF1FA;
  150. }
  151. #companyInput{
  152. background-color: #ECF1FA;
  153. }
  154. #phoneInput{
  155. background-color: #ECF1FA;
  156. }
  157. #addressInput{
  158. background-color: #ECF1FA;
  159. }
  160. </style>
  161. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
  162. <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
  163. <script src="https://wl-resource.obs.cn-south-1.myhuaweicloud.com/static/axios.min.js"></script>
  164. </head>
  165. <body>
  166. <div class="vehicle-info">
  167. <h1 class="report-title">诊断报告</h1>
  168. <p class="report-time">- ${reportTime} -</p>
  169. </div>
  170. <#list controlListMap as controlMap>
  171. <div class="vehicle-info">
  172. <div>
  173. <h2>车辆信息</h2>
  174. <img src="https://wl-resource.obs.cn-south-1.myhuaweicloud.com/static/img.png"
  175. height="30" width="30"
  176. style="float: right; margin: 0 0 10px 10px; cursor: pointer;"
  177. onclick="editCell()">
  178. </div>
  179. <table>
  180. <tr>
  181. <td>车架号:</td>
  182. <td id="vin" style="padding-left: 180px">
  183. <#if baseMap["车架号"]?has_content>
  184. ${baseMap["车架号"]}
  185. <#else>
  186. </#if>
  187. </td>
  188. </tr>
  189. <tr>
  190. <td>年款:</td>
  191. <td id="year" style="padding-left: 180px">
  192. <#if baseMap["年款"]?has_content>
  193. ${baseMap["年款"]}
  194. <#else>
  195. </#if>
  196. </td>
  197. </tr>
  198. <tr>
  199. <td>里程:</td>
  200. <td id="mileage" style="padding-left: 180px">
  201. <#if baseMap["里程"]?has_content>
  202. ${baseMap["里程"]}
  203. <#else>
  204. </#if>
  205. </td>
  206. </tr>
  207. <tr>
  208. <td>诊断路径:</td>
  209. <td style="padding-left: 180px">${baseMap["诊断路径"]}</td>
  210. </tr>
  211. <tr>
  212. <td>报告编号:</td>
  213. <td style="padding-left: 180px">${baseMap["报告编号"]}</td>
  214. </tr>
  215. <tr>
  216. <td>SN:</td>
  217. <td style="padding-left: 180px">${baseMap["SN"]}</td>
  218. </tr>
  219. </table>
  220. </div>
  221. <div class="diagnosis-details">
  222. <h2>诊断详情</h2>
  223. <div style="display: flex;"><div class="fan"><h3>${controlMap.getName()}</h3></div>
  224. <div style="margin-top: 83px;width: 10000px;margin-right: 50px" ><hr color="#406DB7"></div></div>
  225. <table>
  226. <div class="company-info">
  227. <p>故障码(
  228. <#if controlMap.getFaultCodeMap()?size != 0 >
  229. ${controlMap.getFaultCodeMap()?size}
  230. <#else>
  231. 0
  232. </#if>
  233. )</p>
  234. </div>
  235. <tr>
  236. <td>
  237. <ul>
  238. <#list controlMap.getFaultCodeMap()?keys as key>
  239. <li>${key}:</li>
  240. <p></p>
  241. </#list>
  242. </ul>
  243. </td>
  244. <td style="padding-left: 180px">
  245. <ul>
  246. <#list controlMap.getFaultCodeMap()?values as value>
  247. <li>${value}</li>
  248. <p></p>
  249. </#list>
  250. </ul>
  251. </td>
  252. </tr>
  253. </table>
  254. <div class="vehicle-info">
  255. <p>版本信息(
  256. <#if controlMap.getVersionMap()?size != 0 >
  257. ${controlMap.getVersionMap()?size}
  258. <#else>
  259. 0
  260. </#if>
  261. )</p>
  262. </div>
  263. <table>
  264. <#list controlMap.getVersionMap()?keys as key>
  265. <tr>
  266. <td>${key}</td>
  267. <td style="padding-left: 190px">${controlMap.getVersionMap()[key]}</td>
  268. </tr>
  269. </#list>
  270. </table>
  271. </div>
  272. </#list>
  273. <div class="company-info">
  274. <img src="https://wl-resource.obs.cn-south-1.myhuaweicloud.com/static/img.png"
  275. height="30" width="30"
  276. style="float: right; margin: 0 0 10px 10px; cursor: pointer;"
  277. onclick="editCellFoot()">
  278. <table>
  279. <tr>
  280. <td>公司:</td>
  281. <td id="company" style="padding-left: 180px">
  282. <#if companyMap["公司"]?has_content>
  283. ${companyMap["公司"]}
  284. <#else>
  285. </#if>
  286. </td>
  287. </tr>
  288. <tr>
  289. <td>电话:</td>
  290. <td id="phone" style="padding-left: 180px">
  291. <#if companyMap["电话"]?has_content>
  292. ${companyMap["电话"]}
  293. <#else>
  294. </#if>
  295. </td>
  296. </tr>
  297. <tr>
  298. <td>地址:</td>
  299. <td id="address" style="padding-left: 180px">
  300. <#if companyMap["地址"]?has_content>
  301. ${companyMap["地址"]}
  302. <#else>
  303. </#if>
  304. </td>
  305. </tr>
  306. </table>
  307. <p STYLE="font-size: 15px"><text style="color: red">*</text>该车辆检测报告仅对本次检查结果负责</p>
  308. </div>
  309. <script>
  310. function editCell() {
  311. var vin = document.getElementById('vin');
  312. var year = document.getElementById('year');
  313. var mileage = document.getElementById('mileage');
  314. var vinText = vin.innerText;
  315. var yearText = year.innerText;
  316. var mileageText = mileage.innerText;
  317. vin.innerHTML = '<input type="text" id="vinInput" value="' + vinText + '" onblur="saveChanges(\'vin\', this.value)">';
  318. year.innerHTML = '<input type="text" id="yearInput" value="' + yearText + '" onblur="saveChanges(\'year\', this.value)">';
  319. mileage.innerHTML = '<input type="text" id="mileageInput" value="' + mileageText + '" onblur="saveChanges(\'mileage\', this.value)">';
  320. }
  321. function saveChanges(field,value) {
  322. if (value==''){
  323. return
  324. }
  325. var input = document.getElementById(field);
  326. var id = ${id};
  327. // 这里可以进行保存操作,比如向服务器发送请求保存数据修改
  328. // 保存完成后可以进行一些提示或其他操作
  329. // 使用 Axios 发送 POST 请求
  330. axios.post('http://47.113.197.148:8888/app/diagnosis/report/updateBase', {
  331. id: id,
  332. type: field,
  333. value: value,
  334. }, {
  335. withCredentials: true, // 启用跨域支持
  336. })
  337. .then(function (response) {
  338. if (response.data.code == 200) {
  339. swal("修改成功!", "", "success");
  340. // 最后销毁输入框,恢复文本
  341. input.innerHTML = value;
  342. } else {
  343. swal("修改失败!", "", "fail");
  344. }
  345. })
  346. .catch(function (error) {
  347. console.error(error);
  348. });
  349. }
  350. function editCellFoot() {
  351. var address = document.getElementById('address');
  352. var company = document.getElementById('company');
  353. var phone = document.getElementById('phone');
  354. var addressText = address.innerText;
  355. var companyText = company.innerText;
  356. var phoneText = phone.innerText;
  357. address.innerHTML = '<input type="text" id="addressInput" value="' +
  358. addressText + '" onblur="saveChangesFoot(\'address\', this.value)">';
  359. company.innerHTML = '<input type="text" id="companyInput" value="'
  360. + companyText + '" onblur="saveChangesFoot(\'company\', this.value)">';
  361. phone.innerHTML = '<input type="text" id="phoneInput" value="' +
  362. phoneText + '" onblur="saveChangesFoot(\'phone\', this.value)">';
  363. }
  364. function saveChangesFoot(field,value) {
  365. if (value == '') {
  366. return
  367. }
  368. var input = document.getElementById(field);
  369. var id = ${id};
  370. axios.post('http://116.205.227.91:8888/app/diagnosis/report/updateCompany', {
  371. id: id,
  372. type: field,
  373. value: value,
  374. }, {
  375. withCredentials: true, // 启用跨域支持
  376. })
  377. .then(function (response) {
  378. if (response.data.code == 200) {
  379. swal("修改成功!", "", "success");
  380. // 最后销毁输入框,恢复文本
  381. input.innerHTML = value;
  382. } else {
  383. swal("修改失败!", "", "fail");
  384. }
  385. })
  386. .catch(function (error) {
  387. console.error(error);
  388. });
  389. }
  390. </script>
  391. </body>
  392. </html>