fix(web): 修改了报告样式

kt-base/src/main/resources/templates/overview.ftl

@@ -44,7 +44,7 @@
             </#if>
         </form>
     </div>
-    <div class="table">
+    <div class="table" style="overflow: auto">
         <table class="table table-striped">
             <thead>
             <tr>
@@ -64,16 +64,50 @@
                 <#list fail as failCase>
                     <tr>
                         <#assign caseNo=caseNo+1>
-                        <th scope="row">${caseNo}</th>
-                        <td>${failCase.testCaseName!}</td>
-                        <td>${failCase.type!}</td>
-                        <td>${failCase.detail!}</td>
-                        <td>${failCase.description!}</td>
-                        <td style="color: red">${failCase.result?c}</td>
-                        <td>${failCase.duration!}</td>
-                        <td class="clickClass"
+                        <th style="width: 60px" scope="row">
+                            <div style="width: 60px">
+                                ${caseNo}
+                            </div>
+                        </th>
+                        <td style="width: 184px">
+                            <div style="width: 184px;">${failCase.testCaseName!}</div>
+                        </td>
+                        <td style="width: 108px">
+                            <div style="width: 108px">
+                                ${failCase.type!}
+                            </div>
+                        </td>
+                        <td style="width: 500px">
+                            <div style="width: 500px;cursor: pointer;display: flex;justify-content: flex-start;align-items: flex-start"
+                                 class="openJson">
+                                <img style="width: 16px;    margin-top: 4px;margin-right: 8px;transition:.5s all ease;user-select: none"
+                                     src="./res/img/left.png"/>
+                                <span style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;font-size: 16px">{
+                                ${failCase.detail!}
+                                </span>
+                            </div>
+                        </td>
+                        <td>
+                            <div style="width: 160px">
+                                ${failCase.description!}
+                            </div>
+                        </td>
+                        <td style="color: red;width: 84px">
+                            <div style="width: 84px">
+                                ${failCase.result?c}
+                            </div>
+                        </td>
+                        <td style="width: 84px">
+                            <div style="width: 84px">
+                                ${failCase.duration!}
+                            </div>
+                        </td>
+                        <td style="width: 84px"
+                            class="clickClass"
                             data-message='${failCase.str!}'>
-                            查看结果
+                            <div style="width: 84px">
+                                查看结果
+                            </div>
                         </td>
                     </tr>
                 </#list>
@@ -86,16 +120,50 @@
                 <#list pass as passCase>
                     <tr>
                         <#assign caseNo=caseNo+1>
-                        <th scope="row">${caseNo}</th>
-                        <td>${passCase.testCaseName!}</td>
-                        <td>${passCase.type!}</td>
-                        <td>${passCase.detail!}</td>
-                        <td>${passCase.description!}</td>
-                        <td style="color: green">${passCase.result?c}</td>
-                        <td>${passCase.duration!}</td>
-                        <td class="clickClass"
+                        <th style="width: 60px" scope="row">
+                            <div style="width: 60px">
+                                ${caseNo}
+                            </div>
+                        </th>
+                        <td style="width: 184px">
+                            <div style="width: 184px;">${passCase.testCaseName!}</div>
+                        </td>
+                        <td style="width: 108px">
+                            <div style="width: 108px">
+                                ${passCase.type!}
+                            </div>
+                        </td>
+                        <td style="width: 500px">
+                            <div style="width: 500px;cursor: pointer;display: flex;justify-content: flex-start;align-items: flex-start"
+                                 class="openJson">
+                                <img style="width: 16px;    margin-top: 4px;margin-right: 8px;transition:.5s all ease;user-select: none"
+                                     src="./res/img/left.png"/>
+                                <span style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;font-size: 16px">{
+                                ${passCase.detail!}
+                                </span>
+                            </div>
+                        </td>
+                        <td>
+                            <div style="width: 160px">
+                                ${passCase.description!}
+                            </div>
+                        </td>
+                        <td style="color: green;width: 84px">
+                            <div style="width: 84px">
+                                ${passCase.result?c}
+                            </div>
+                        </td>
+                        <td style="width: 84px">
+                            <div style="width: 84px">
+                                ${passCase.duration!}
+                            </div>
+                        </td>
+                        <td style="width: 84px"
+                            class="clickClass"
                             data-message='${passCase.str!}'>
-                            查看结果
+                            <div style="width: 84px">
+                                查看结果
+                            </div>
                         </td>
                     </tr>
                 </#list>
@@ -173,6 +241,25 @@
             }
         }
     })
+    $('.openJson').each((i, v) => {
+        v.onclick = function () {
+            console.log(v.childNodes)
+            if (v.childNodes[1].style.transform == 'rotate(90deg)') {
+                v.childNodes[1].style.transform = 'rotate(0deg)'
+            } else {
+                v.childNodes[1].style.transform = 'rotate(90deg)'
+            }
+            if (v.childNodes[3].style.whiteSpace == 'pre') {
+                v.childNodes[3].style.whiteSpace = 'nowrap'
+                v.childNodes[3].style.overflow = 'hidden'
+                v.childNodes[3].style.textOverflow = 'ellipsis'
+            } else {
+                v.childNodes[3].style.whiteSpace = 'pre'
+            }
+
+        }
+
+    })
 </script>
 </body>
 </html>
\ No newline at end of file