[完善] 最终结果页面初步完成

src/app/ui/drawing-result/drawing-result.component.html

@@ -2,23 +2,38 @@
   <header><img src="../../../assets/images/tophead.png"></header>
 
   <div class="center">
+    <h3>业务理论考试</h3>
     <table>
       <tr>
-        <th *ngFor="let header of headers">{{header}}</th>
+        <th *ngFor="let header of headersZero">{{header}}</th>
       </tr>
-      <tr *ngFor="let item of tableData">
+      <tr *ngFor="let item of tableDataZero">
         <td>{{item.order}}</td>
         <td>{{item.fireName}}</td>
         <td>{{item.drawLotsOrder}}</td>
-        <td>{{item.testTime}}</td>
         <td>
-          <p  *ngFor="let items of item.num" class="bottomBorder">{{items}}</p>
+          <p *ngFor="let items of item.name" class="bottomBorder">{{items}}</p>
+        </td>
+        <td>
+          <p *ngFor="let items of item.seatNum" class="bottomBorder">{{items}}</p>
         </td>
+      </tr>
+    </table>
+    <h3>指挥能力考评</h3>
+    <table>
+      <tr>
+        <th *ngFor="let header of headers">{{header}}</th>
+      </tr>
+      <tr *ngFor="let item of tableData">
+        <td>{{item.order}}</td>
+        <td>{{item.fireName}}</td>
+        <td>{{item.drawLotsOrder}}</td>
+        <td>{{item.num}}</td>
         <td>
-          <p  *ngFor="let items of item.name" class="bottomBorder">{{items}}</p>
+          <p *ngFor="let items of item.name" class="bottomBorder">{{items}}</p>
         </td>
         <td>
-          <p  *ngFor="let items of item.seatNum" class="bottomBorder">{{items}}</p>
+          <p *ngFor="let items of item.seatNum" class="bottomBorder">{{items}}</p>
         </td>
       </tr>
     </table>

src/app/ui/drawing-result/drawing-result.component.scss

@@ -18,18 +18,32 @@
 
 .center {
   width: 80%;
-  margin: 50px auto;
+  max-height: 90%;
-  background-color: #fff;
+  margin: 0 auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  text-align: center;
+  h3 {
+    font-size: 26px;
+    color: #fff;
+    margin: 30px 0;
+  }
+}
+.center::-webkit-scrollbar {
+  display: none;
 }
 
 table {
   width: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
   text-align: center;
   border-collapse:collapse;
   word-break:break-all; 
   word-wrap:break-all;
   table-layout:fixed;
   th {
+    box-sizing: border-box;
     height: 50px;
     font-size: 24px;
     color: #fff;
@@ -38,11 +52,13 @@ table {
     background-color: #ff4d29;
   }
   td {
-    height: 80px;
+    box-sizing: border-box;
+    height: 60px;
     color: #000;
     font-weight: 400;
     border: 1px solid #ECEDEE;
   }
+  p { height: 30px; line-height: 30px; box-sizing: border-box; }
   .bottomBorder:not(:last-child) {
     border-bottom: 1px solid #ECEDEE;
   }

src/app/ui/drawing-result/drawing-result.component.ts

@@ -12,11 +12,40 @@ export class DrawingResultComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  headers:string [] = ['序号','支队名称','抽签顺序','考试批次','编号', '姓名','座位号']
+  headersZero:string [] = ['序号','支队名称','抽签顺序', '职级','座位号']
+  tableDataZero = [
+    {order: 1, fireName: '南宁支队', drawLotsOrder: '01', name: ['支队长','副支队长'], seatNum: ['01','02'] },
+    {order: 2, fireName: '柳州支队', drawLotsOrder: '02', name: ['支队长','副支队长'], seatNum: ['03','04'] },
+    {order: 3, fireName: '桂林支队', drawLotsOrder: '03', name: ['支队长','副支队长'], seatNum: ['05','06'] },
+    {order: 4, fireName: '梧州支队', drawLotsOrder: '04', name: ['支队长','副支队长'], seatNum: ['01','02'] },
+    {order: 5, fireName: '北海支队', drawLotsOrder: '05', name: ['支队长','副支队长'], seatNum: ['03','04'] },
+    {order: 6, fireName: '防城港支队', drawLotsOrder: '06', name: ['支队长','副支队长'], seatNum: ['05','06'] },
+    {order: 7, fireName: '钦州支队', drawLotsOrder: '07', name: ['支队长','副支队长'], seatNum: ['01','02'] },
+    {order: 8, fireName: '贵港支队', drawLotsOrder: '08', name: ['支队长','副支队长'], seatNum: ['03','04'] },
+    {order: 9, fireName: '玉林支队', drawLotsOrder: '09', name: ['支队长','副支队长'], seatNum: ['05','06'] },
+    {order: 10, fireName: '百色支队', drawLotsOrder: '10', name: ['支队长','副支队长'], seatNum: ['01','02'] },
+    {order: 11, fireName: '贺州支队', drawLotsOrder: '11', name: ['支队长','副支队长'], seatNum: ['03','04'] },
+    {order: 12, fireName: '河池支队', drawLotsOrder: '12', name: ['支队长','副支队长'], seatNum: ['05','06'] },
+    {order: 13, fireName: '来宾支队', drawLotsOrder: '13', name: ['支队长','副支队长'], seatNum: ['03','04'] },
+    {order: 14, fireName: '崇左支队', drawLotsOrder: '14', name: ['支队长','副支队长'], seatNum: ['05','06'] },
+  ]
+
+  headers:string [] = ['序号','支队名称','抽签顺序','场景类型', '职级','座位号']
   tableData = [
-    {order: 1, fireName: '南宁市消防救援队', drawLotsOrder: '01', testTime: '上午8:00', num: ['01-01','01-02','01-03','01-04'], name: ['陈小辉','毛志毅','韩月','白显乐'], seatNum: ['01','02','03','04'] },
+    {order: 1, fireName: '南宁支队', drawLotsOrder: '05', num: localStorage.getItem('5') || '', name: ['支队长','副支队长'], seatNum: ['8号','21号'] },
-    {order: 2, fireName: '南宁市消防救援队', drawLotsOrder: '01', testTime: '上午8:00', num: ['01-01','01-02','01-03','01-04'], name: ['陈小辉','毛志毅','韩月','白显乐'], seatNum: ['01','02','03','04'] },
+    {order: 2, fireName: '柳州支队', drawLotsOrder: '10', num: localStorage.getItem('10') || '', name: ['支队长','副支队长'], seatNum: ['12号','26号'] },
-    {order: 3, fireName: '南宁市消防救援队', drawLotsOrder: '01', testTime: '上午8:00', num: ['01-01','01-02','01-03','01-04'], name: ['陈小辉','毛志毅','韩月','白显乐'], seatNum: ['01','02','03','04'] },
+    {order: 3, fireName: '桂林支队', drawLotsOrder: '14', num: localStorage.getItem('14') || '', name: ['支队长','副支队长'], seatNum: ['14号','15号'] },
+    {order: 4, fireName: '梧州支队', drawLotsOrder: '03', num: localStorage.getItem('3') || '', name: ['支队长','副支队长'], seatNum: ['13号','28号'] },
+    {order: 5, fireName: '北海支队', drawLotsOrder: '08', num: localStorage.getItem('8') || '', name: ['支队长','副支队长'], seatNum: ['4号','22号'] },
+    {order: 6, fireName: '防城港支队', drawLotsOrder: '13', num: localStorage.getItem('13') || '', name: ['支队长','副支队长'], seatNum: ['1号','16号'] },
+    {order: 7, fireName: '钦州支队', drawLotsOrder: '06', num: localStorage.getItem('6') || '', name: ['支队长','副支队长'], seatNum: ['10号','25号'] },
+    {order: 8, fireName: '贵港支队', drawLotsOrder: '01', num: localStorage.getItem('1') || '', name: ['支队长','副支队长'], seatNum: ['11号','19号'] },
+    {order: 9, fireName: '玉林支队', drawLotsOrder: '07', num: localStorage.getItem('7') || '', name: ['支队长','副支队长'], seatNum: ['2号','27号'] },
+    {order: 10, fireName: '百色支队', drawLotsOrder: '12', num: localStorage.getItem('12') || '', name: ['支队长','副支队长'], seatNum: ['9号','20号'] },
+    {order: 11, fireName: '贺州支队', drawLotsOrder: '02', num: localStorage.getItem('02') || '', name: ['支队长','副支队长'], seatNum: ['3号','24号'] },
+    {order: 12, fireName: '河池支队', drawLotsOrder: '04', num: localStorage.getItem('04') || '', name: ['支队长','副支队长'], seatNum: ['6号','18号'] },
+    {order: 13, fireName: '来宾支队', drawLotsOrder: '09', num: localStorage.getItem('09') || '', name: ['支队长','副支队长'], seatNum: ['7号','23号'] },
+    {order: 14, fireName: '崇左支队', drawLotsOrder: '11', num: localStorage.getItem('11') || '', name: ['支队长','副支队长'], seatNum: ['5号','17号'] },
   ]
 
 }