消息警示添加内容及航班列表优化

src/app/pages/historical-data/historical-data.component.ts

@@ -116,7 +116,7 @@ export class HistoricalDataComponent implements OnInit {
             data => {
                 data.body.forEach(element => {
                     if (element.groupCode === 'userSettingCol') {
-                        this.col_lists = JSON.parse(element.settingContent).allCols;
+                        this.col_lists = JSON.parse(element.settingContent).defaultData;
                         this.render_col_lists = JSON.parse(element.settingContent).targetList;
                     }
                 })
@@ -252,7 +252,7 @@ export class HistoricalDataComponent implements OnInit {
             data => {
                 data.body.forEach(element => {
                     if (element.groupCode === 'userSettingCol') {
-                        this.col_lists = JSON.parse(element.settingContent).allCols;
+                        this.col_lists = JSON.parse(element.settingContent).defaultData;
                         this.render_col_lists = JSON.parse(element.settingContent).targetList;
                     }
                 })

src/app/pages/main/detail-tab/detail-tab.component.scss

@@ -1,18 +1,19 @@
 .tab-container{
     padding: 10px;
-    height: 635px;
-    overflow: auto;
-    border: 1px solid #ccc;
+    // height: 635px;
+    // overflow: auto;
+    // border: 1px solid #ccc;
     .hr-line{
         font-weight: bold;
     }
     .message-container{
-        padding: 5px 10px 5px 10px;
+        padding: 5px 10px 5px 20px;
         p{
             margin: 0;
             label{
-                width: 120px;
-                text-align: right;
+                // width: 120px;
+                font-weight: bolder;
+                // text-align: right;
             }
         }
     }

src/app/pages/main/main.component.html

@@ -166,14 +166,14 @@
             <div #tableContainer id="table-container" class="table-container" [ngClass]="{'table-c': !tabClose,'table-o': tabClose}">
                 <div class="table-head" #tableHead>
                     <table class="table">
-                        <colgroup>
+                        <!-- <colgroup>
                             <col *ngFor="let common_col of commonCol" [width]="common_col.COL_WIDTH">
                             <col *ngFor="let airline_col of render_col_lists" [width]="airline_col.COL_WIDTH">
-                        </colgroup>
+                        </colgroup> -->
                         <thead>
                             <tr>
-                                <th *ngFor="let common_col of commonCol">{{common_col.COL_CN}}</th>
-                                <th *ngFor="let airline_col of render_col_lists">{{airline_col.COL_CN}}</th>
+                                <th *ngFor="let common_col of commonCol" [ngStyle]="{'min-width':common_col.COL_WIDTH}">{{common_col.COL_CN}}</th>
+                                <th *ngFor="let airline_col of render_col_lists" [ngStyle]="{'min-width':airline_col.COL_WIDTH}">{{airline_col.COL_CN}}</th>
                             </tr>
                         </thead>
                     </table>
@@ -181,15 +181,21 @@
                 <div class="table-body" #tableBody (scroll)="handleScroll($event)">
                     <div class="list-view-phantom" [ngStyle]="{ 'height': wait_render_data.length * 42 + 'px' }"></div>
                     <table #tableContent id="table" class="table table-striped">
-                        <colgroup>
+                        <!-- <thead>
+                            <tr>
+                                <th *ngFor="let common_col of commonCol" [width]="common_col.COL_WIDTH"></th>
+                                <th *ngFor="let airline_col of render_col_lists" [width]="airline_col.COL_WIDTH"></th>
+                            </tr>
+                        </thead> -->
+                        <!-- <colgroup>
                             <col *ngFor="let common_col of commonCol" [width]="common_col.COL_WIDTH">
                             <col *ngFor="let airline_col of render_col_lists" [width]="airline_col.COL_WIDTH">
-                        </colgroup>
+                        </colgroup> -->
                         <tbody>
                             <tr *ngFor="let airline_row of render_data;let i = index" (click)="selectRow(airline_row)"
                                 [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
-                                <td>{{start+i+1}}</td>
-                                <td>
+                                <td style="min-width:55px">{{start+i+1}}</td>
+                                <td style="min-width:120px">
                                     <img class="mr-2" *ngIf="getVipNotes(airline_row)" src="/adminweb/assets/images/important-notes/vip.png"
                                         alt="">
                                     <img class="mr-2" *ngIf="getOutplanNotes(airline_row)" src="/adminweb/assets/images/important-notes/out_plan.png"
@@ -207,15 +213,15 @@
                                     <img class="mr-2" *ngIf="getStopoverNotes(airline_row)" src="/adminweb/assets/images/important-notes/stopover.png"
                                         alt="">
                                 </td>
-                                <td>{{airline_row['renderFlight']['FLID']}}</td>
+                                <td style="min-width:165px">{{airline_row['renderFlight']['FLID']}}</td>
                                 <td *ngFor="let airline_col of render_col_lists" [ngClass]="getPosition(airline_col.COL_CODE,airline_row)"
-                                    [ngStyle]="getColor(airline_col.COL_CODE,airline_row)" [title]="airline_row['renderFlight'][airline_col.COL_CODE]">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
+                                    [ngStyle]="getColor(airline_col.COL_CODE,airline_row,airline_col.COL_WIDTH)" [title]="airline_row['renderFlight'][airline_col.COL_CODE]">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
             </div>
-            <div class="airline-message" [ngClass]="{'tab-c': tabClose,'tab-o': !tabClose}">
+            <div #tabContainer class="airline-message" [ngClass]="{'tab-c': tabClose,'tab-o': !tabClose}">
                 <nz-tabset [nzTabPosition]="'top'" [nzType]="'card'" [nzShowPagination]="false">
                     <nz-tab nzTitle="关联信息" (nzClick)="nzClick()" *ngIf="checkboxGroup.related">
                         <app-related-tab [flight]="row_state"></app-related-tab>

src/app/pages/main/main.component.scss

@@ -136,6 +136,14 @@
                         }
                     }
                 }
+                /deep/ .ant-tabs-content{
+                    height: calc(100% - 65px);
+                    overflow-y: auto;
+                    border: 1px solid #ccc;
+                }
+                nz-tabset{
+                    height: 100%;
+                }
                 &::-webkit-scrollbar {
                     width: 15px;
                     height: 15px;

src/app/pages/main/main.component.ts

@@ -90,7 +90,7 @@ export class MainComponent implements OnInit {
     public wait_render_data: Array<object> = [];
     public render_data: Array<object> = [];  //显示数据，即需要显示的数据
 
-    public commonCol:Array<object>;
+    public commonCol: Array<object>;
     public col_lists: Array<object>;    //列数据
     public render_col_lists: Array<object>;
 
@@ -109,6 +109,7 @@ export class MainComponent implements OnInit {
     @ViewChild('pageContent') pageContent;
     @ViewChild('searchFilter') searchFilter;
     @ViewChild('tableContainer') tableContainer;
+    @ViewChild('tabContainer') tabContainer;
     @ViewChild('tableHead') tableHead;
     @ViewChild('tableBody') tableBody;
     @ViewChild('tableContent') tableContent;
@@ -121,8 +122,12 @@ export class MainComponent implements OnInit {
 
 
     ngOnInit() {
+        console.log(Object.prototype.toString.call({}));
         this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.pageContent.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 35 + 'px');
         this.renderer2.setStyle(this.tableBody.nativeElement, 'height', this.tableContainer.nativeElement.offsetHeight - this.tableHead.nativeElement.offsetHeight + 'px');
+        if (!this.tabClose) {
+            this.renderer2.setStyle(this.tabContainer.nativeElement, 'height', this.pageContent.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 35 + 'px');
+        }
         window.onresize = function () {
             this.calcVisibleCount();
         }.bind(this)
@@ -268,11 +273,11 @@ export class MainComponent implements OnInit {
         this.start = Math.floor(scrollTop / this.trItemHeight);
         this.end = this.start + this.visibleCount;
         this.render_data = this.wait_render_data.slice(this.start, this.end);
-        setTimeout(()=>{
-            $(".table-body tbody>tr").eq(0).find('td').each((index,element)=>{
-                $(".table-head table colgroup").eq(0).find('col').eq(index).attr('width',$(element).innerWidth()+'px')
+        setTimeout(() => {
+            $(".table-body tbody>tr").eq(0).find('td').each((index, element) => {
+                $(".table-head table thead tr").eq(0).find('th').eq(index).attr('width', $(element).innerWidth() + 'px');
             })
-        },500)
+        }, 500)
 
         this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
         this.operateSpinServiceService.hideSpin();
@@ -295,15 +300,15 @@ export class MainComponent implements OnInit {
         const scrollTop = this.tableBody.nativeElement.scrollTop;
         $(".table-head").scrollLeft($('.table-body').scrollLeft());
         const fixedScrollTop = scrollTop - scrollTop % this.trItemHeight;
-        this.tableContent.nativeElement.style.webkitTransform = `translateY(${fixedScrollTop - 42}px)`;
+        this.tableContent.nativeElement.style.webkitTransform = `translateY(${fixedScrollTop}px)`;
         this.start = Math.floor(scrollTop / this.trItemHeight);
         this.end = this.start + this.visibleCount;
         this.render_data = this.wait_render_data.slice(this.start, this.end);
-        setTimeout(()=>{
-            $(".table-body tbody>tr").eq(0).find('td').each((index,element)=>{
-                $(".table-head table colgroup").eq(0).find('col').eq(index).attr('width',$(element).innerWidth()+'px')
+        setTimeout(() => {
+            $(".table-body tbody>tr").eq(0).find('td').each((index, element) => {
+                $(".table-head table thead tr").eq(0).find('th').eq(index).attr('width', $(element).innerWidth() + 'px');
             })
-        },500)
+        }, 500)
     }
 
     /**
@@ -312,6 +317,9 @@ export class MainComponent implements OnInit {
     calcVisibleCount() {
         this.renderer2.setStyle(this.tableContainer.nativeElement, 'height', this.pageContent.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 35 + 'px');
         this.renderer2.setStyle(this.tableBody.nativeElement, 'height', this.tableContainer.nativeElement.offsetHeight - this.tableHead.nativeElement.offsetHeight + 'px');
+        if (!this.tabClose) {
+            this.renderer2.setStyle(this.tabContainer.nativeElement, 'height', this.pageContent.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 35 + 'px');
+        }
         this.visibleCount = Math.ceil(this.tableBody.nativeElement.clientHeight / this.trItemHeight);
         const scrollTop = this.tableBody.nativeElement.scrollTop;
         const fixedScrollTop = scrollTop - scrollTop % this.trItemHeight;
@@ -319,11 +327,11 @@ export class MainComponent implements OnInit {
         this.start = Math.floor(scrollTop / this.trItemHeight);
         this.end = this.start + this.visibleCount;
         this.render_data = this.wait_render_data.slice(this.start, this.end);
-        setTimeout(()=>{
-            $(".table-body tbody>tr").eq(0).find('td').each((index,element)=>{
-                $(".table-head table colgroup").eq(0).find('col').eq(index).attr('width',$(element).innerWidth()+'px')
+        setTimeout(() => {
+            $(".table-body tbody>tr").eq(0).find('td').each((index, element) => {
+                $(".table-head table thead tr").eq(0).find('th').eq(index).attr('width', $(element).innerWidth() + 'px');
             })
-        },500)
+        }, 500)
     }
 
     /**
@@ -410,26 +418,36 @@ export class MainComponent implements OnInit {
      * 动态消息处理方法
      * @param message 
      */
+    startposi: number
     dynamicMessageHandle(message) {
+        this.startposi = new Date().getTime();
         let index = this.raw_data.findIndex(element => element['FLID'] === message.FLID);
         if (index > -1) {
             this.raw_data[index] = message;
         } else {
             this.raw_data.push(message);
         }
+        console.log(new Date().getTime() - this.startposi + '消息更新替换到原始数据所花时间');
 
         //查找链接航班并将其组合成一条数据
+        this.startposi = new Date().getTime();
         let combined_linked_data = this.dataHandle.findLinkFlights(this.raw_data);
+        console.log(new Date().getTime() - this.startposi + '找链接航班所花时间')
         let combined_data = [];
         this.combined_data = [];
+        this.startposi = new Date().getTime()
         combined_linked_data.forEach(element => {
             let flights_item = this.dataHandle.flightsRenderTransfer(element, this.col_lists);
             this.combined_data.push(flights_item);
         });
+        console.log(new Date().getTime() - this.startposi + '转换结束所花时间')
+        this.startposi = new Date().getTime();
         this.combined_data.forEach(item => {
             combined_data.push(this.dataHandle.basicDataTransHandle(item, this.airports, this.citys, this.airlines, this.flightStatus, this.flightTypes));
         })
+        console.log(new Date().getTime() - this.startposi + '基础数据转换结束所花时间');
         this.combined_data = combined_data;
+        this.startposi = new Date().getTime();
         this.combined_data.forEach(element => {
             element['ORDER'] = this.orderHandle.sequence(element);
         })
@@ -437,6 +455,10 @@ export class MainComponent implements OnInit {
             return (a['ORDER'] - b['ORDER']);
         })
 
+        console.log(new Date().getTime() - this.startposi + '排序所花时间');
+
+        this.selectChange('dynamic');
+
         if (this.airlinesSelections.findIndex(airline => airline.airlineCodeIata === message['ALCD']) === -1) {
             let index = this.airlines.findIndex(val => val.airlineCodeIata === message['ALCD']);
             this.airlinesSelections.push(this.airlines[index]);
@@ -447,7 +469,7 @@ export class MainComponent implements OnInit {
             this.flightTypeSelections.push(this.flightTypes[index]);
         }
 
-        this.selectChange('dynamic');
+
 
         // let dynamicHandleData = this.dataHandle.dynamicMessageHandle(
         //     message,
@@ -503,7 +525,7 @@ export class MainComponent implements OnInit {
         let alertType = message.META.TYPE + '-' + message.META.STYP;
         let index = this.airline_message_alert.findIndex(val => val['COL_CODE'] === alertType);
         if (index > -1) {
-            let alertText = this.alertMessage[alertType]();
+            let alertText = this.alertMessage[alertType](message, this.airports);
             const toastCfg = new ToastConfig(ToastType.SUCCESS, '', alertText, 600000);
             this.toastService.toast(toastCfg);
         }
@@ -553,6 +575,7 @@ export class MainComponent implements OnInit {
      * 下拉框选择筛选
      */
     selectChange(type) {
+        this.startposi = new Date().getTime()
         if (type === 'filter') {
             this.operateSpinServiceService.showSpin();
         }
@@ -760,11 +783,11 @@ export class MainComponent implements OnInit {
         } else {
             this.wait_render_data = filter_data;
             this.render_data = this.wait_render_data.slice(this.start, this.end);
-            setTimeout(()=>{
-                $(".table-body tbody>tr").eq(0).find('td').each((index,element)=>{
-                    $(".table-head table colgroup").eq(0).find('col').eq(index).attr('width',$(element).innerWidth()+'px')
+            setTimeout(() => {
+                $(".table-body tbody>tr").eq(0).find('td').each((index, element) => {
+                    $(".table-head table thead tr").eq(0).find('th').eq(index).attr('width', $(element).innerWidth() + 'px');
                 })
-            },500)
+            }, 500)
             // this.render_data = filter_data;
             this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
             this.operateSpinServiceService.hideSpin();
@@ -812,13 +835,16 @@ export class MainComponent implements OnInit {
                 })
             }
         }
+        console.log(new Date().getTime() - this.startposi + '判断是否满足过滤条件所花时间');
         this.wait_render_data = filterData;
+        this.startposi = new Date().getTime();
         this.render_data = this.wait_render_data.slice(this.start, this.end);
-        setTimeout(()=>{
-            $(".table-body tbody>tr").eq(0).find('td').each((index,element)=>{
-                $(".table-head table colgroup").eq(0).find('col').eq(index).attr('width',$(element).innerWidth()+'px')
+        console.log(new Date().getTime() - this.startposi + '渲染结束所花时间');
+        setTimeout(() => {
+            $(".table-body tbody>tr").eq(0).find('td').each((index, element) => {
+                $(".table-head table thead tr").eq(0).find('th').eq(index).attr('width', $(element).innerWidth() + 'px');
             })
-        },500)
+        }, 500)
         // this.render_data = filterData;
         this.row_state = this.render_data.length > 0 ? this.render_data[0] : { renderFlight: {} };
         this.operateSpinServiceService.hideSpin();
@@ -916,13 +942,14 @@ export class MainComponent implements OnInit {
         'BOTM': this.cellColorHandle.botm.bind(this.cellColorHandle),
         'GCTM': this.cellColorHandle.gctm.bind(this.cellColorHandle)
     }
-    getColor(col_CODE, flight) {
+    getColor(col_CODE, flight, col_WIDTH) {
         let index = this.airline_color.findIndex(color => color['COL_CODE'] === col_CODE)
         if (index > -1) {
             let styles = this.colorFormatter[col_CODE](flight, this.airline_color[index]);
+            styles['min-width'] = col_WIDTH;
             return styles;
         } else {
-            return null;
+            return { 'min-width': col_WIDTH };
         }
     }
 
@@ -1150,17 +1177,24 @@ export class MainComponent implements OnInit {
      * 复选框勾选事件
      */
     checkboxChange() {
+        let tabClose = true
         for (const key in this.checkboxGroup) {
             if (this.checkboxGroup.hasOwnProperty(key)) {
                 if (this.checkboxGroup[key]) {
-                    this.tabClose = false;
+                    tabClose = false;
                     break;
                 } else {
-                    this.tabClose = true;
+                    tabClose = true;
                     continue;
                 }
             }
         }
+        this.tabClose = tabClose;
+        if (!this.tabClose) {
+            setTimeout(() => {
+                this.renderer2.setStyle(this.tabContainer.nativeElement, 'height', this.pageContent.nativeElement.offsetHeight - this.searchFilter.nativeElement.offsetHeight - 35 + 'px');
+            }, 10)
+        }
     }
 
     /**

src/app/pages/main/related-tab/related-tab.component.scss

@@ -1,8 +1,8 @@
 .tab-container {
     padding: 10px 10px;
-    height: 635px;
-    overflow: auto;
-    border: 1px solid #ccc;
+    // height: 635px;
+    // overflow: auto;
+    // border: 1px solid #ccc;
     .fieldset-card {
         fieldset {
             padding: 5px 10px 20px 10px;