创建websocket服务和spin服务

proxy.conf.json

@@ -1,24 +1,29 @@
 {
-    
+    "/sysapi": {
-    "/sysapi":{
         "target": "http://130.120.3.231:91",
         "secure": false,
         "changeOrigin": true,
         "ws": true
     },
-    "/login":{
+    "/login": {
         "target": "http://130.120.3.231:91",
         "secure": false,
         "changeOrigin": true,
         "ws": true
     },
-    "/logout":{
+    "/logout": {
         "target": "http://130.120.3.231:91",
         "secure": false,
         "changeOrigin": true,
         "ws": true
     },
-    "/adminapi":{
+    "/adminapi": {
+        "target": "http://130.120.3.231:91",
+        "secure": false,
+        "changeOrigin": true,
+        "ws": true
+    },
+    "/v2": {
         "target": "http://130.120.3.231:91",
         "secure": false,
         "changeOrigin": true,

src/app/app.module.ts

@@ -22,6 +22,9 @@ import { SelectivePreloadingStrategy } from './preloading-strategy';
 /* 路由权限控制 */
 import { LoginAuthService } from './services/login-auth.service';
 
+/* websocket */
+import { WebsocketService } from './services/websocket.service';
+
 @NgModule({
     declarations: [
         AppComponent
@@ -39,7 +42,8 @@ import { LoginAuthService } from './services/login-auth.service';
         SelectivePreloadingStrategy,
         LoginAuthService,
         HttpService,
-        HttpClientService
+        HttpClientService,
+        WebsocketService
     ],
     bootstrap: [AppComponent]
 })

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

@@ -151,7 +151,7 @@
                             [ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
                             <td>{{i+1}}</td>
                             <td>{{isLast}}</td>
-                            <td *ngFor="let airline_col of col_lists" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
+                            <td *ngFor="let airline_col of col_lists" [ngClass]="getPosition(airline_col.COL_CODE,airline_row)" [ngStyle]="{'background-color':getColor(airline_col.COL_CODE,airline_row)}">{{airline_row['renderFlight'][airline_col.COL_CODE]}}</td>
                         </tr>
                     </tbody>
                 </table>

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

@@ -27,62 +27,89 @@
                 }
             }
         }
-        .airline-table{
+        .airline-table {
-            .table-container{
+            .table-container {
                 display: inline-block;
                 // border: 1px solid #ccc;
                 width: 100%;
                 height: 700px;
                 overflow: auto;
-                box-shadow: 0 0 1px .5px #ddd;
+                box-shadow: 0 0 1px 0.5px #ddd;
-                table{
+                table {
                     width: max-content;
-                    tr{
+                    tr {
                         cursor: pointer;
-                        &.selected{
+                        &.selected {
                             background: rgb(181, 215, 255);
                         }
                     }
-                    th{
+                    th {
                         background-color: #ddd;
+                        color: rgb(0, 0, 255);
                     }
-                    th,td{
+                    // th,td{
-                        // border: none;
+                    //     // border: none;
-                        text-align: center;
+                    //     // text-align: center;
+                    // }
+                }
+                &::-webkit-scrollbar {
+                    width: 15px;
+                    height: 15px;
+                }
+                &::-webkit-scrollbar-thumb {
+                    /*滚动条里面小方块*/
+                    background: rgba(165, 207, 222, 1);
+                    border-radius: 10px;
+                }
+                &::-webkit-scrollbar-track {
+                    background: rgba(0, 0, 0, 0.06);
+                    border-radius: 10px;
                 }
             }
-            }
+            .airline-message {
-            .airline-message{
                 display: inline-block;
                 // box-shadow: 0 0 1px .5px #ddd;
                 vertical-align: top;
                 width: 0;
                 margin-left: 1%;
                 height: 700px;
-                /deep/ .ant-tabs-bar{
+                /deep/ .ant-tabs-bar {
                     border-bottom: 10px solid skyblue;
-                    .ant-tabs-tab{
+                    .ant-tabs-tab {
                         padding: 0 5px;
-                        &.ant-tabs-tab-active{
+                        &.ant-tabs-tab-active {
                             background: skyblue;
                             /* border-color: skyblue; */
-                            color: rgba(0,0,0,0.65);
+                            color: rgba(0, 0, 0, 0.65);
                             padding-bottom: 0;
                         }
                     }
                 }
+                &::-webkit-scrollbar {
+                    width: 15px;
+                    height: 15px;
                 }
-            .table-c{
+                &::-webkit-scrollbar-thumb {
+                    /*滚动条里面小方块*/
+                    background: rgba(165, 207, 222, 1);
+                    border-radius: 10px;
+                }
+                &::-webkit-scrollbar-track {
+                    background: rgba(0, 0, 0, 0.06);
+                    border-radius: 10px;
+                }
+            }
+            .table-c {
                 width: 75%;
             }
-            .table-o{
+            .table-o {
                 width: 100%;
             }
-            .tab-c{
+            .tab-c {
                 width: 0;
                 display: none;
             }
-            .tab-o{
+            .tab-o {
                 width: 24%;
             }
         }

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

@@ -5,7 +5,9 @@ import { ToastService } from '../../components/toast/toast.service';
 import { ToastConfig, ToastType } from '../../components/toast/toast-model';
 
 import { HttpClientService } from '../../services/http-client.service';
-import { BasicDataService } from '../basic-data-service'
+import { BasicDataService } from '../basic-data-service';
+import { OperateSpinServiceService } from '../operate-spin-service.service';
+import { WebsocketService } from '../../services/websocket.service';
 
 import dateFormatter from '../../utils/data-formatter';
 import timeFormatter from '../../utils/time-formatter';
@@ -44,14 +46,16 @@ export class MainComponent implements OnInit {
 
     constructor(
         private basicDataService: BasicDataService,
+        // private operateSpinServiceService:OperateSpinServiceService,
         private httpCilent: HttpClientService,
         private changeDetectorRef: ChangeDetectorRef,
         private toastService: ToastService,
+        private websocketService: WebsocketService
     ) {
         console.log(new Date().getTime())
     }
     public tabClose: boolean = true;
-    public isSpinning:boolean = true;
+    public isSpinning: boolean = true;
 
     //各项基础数据
     public terminals: Array<any>;
@@ -104,6 +108,11 @@ export class MainComponent implements OnInit {
     }
 
     ngOnInit() {
+        this.websocketService.dynamicsMessage().subscribe(
+            event => {
+                console.log(event);
+            }
+        )
         // this.getBasicData()
         this.changeDetectorRef.detach();
         /* 获取显示列 */
@@ -172,9 +181,18 @@ export class MainComponent implements OnInit {
                                 let preHasValue = this.formatter[key](row_flights['preFlight']);
                                 let reaHasValue = this.formatter[key](row_flights['reaFlight']);
                                 if (preHasValue && !reaHasValue) {
+                                    if (key === 'SODT' || key === 'ESTT' || key === 'ACTT') {
+                                        render_flight[key] = preHasValue + ' / '
+                                    } else {
                                         render_flight[key] = preHasValue;
+                                    }
                                 } else if (!preHasValue && reaHasValue) {
+                                    if (key === 'SODT' || key === 'ESTT' || key === 'ACTT') {
+                                        render_flight[key] = ' / ' + reaHasValue
+                                    } else {
                                         render_flight[key] = reaHasValue;
+                                    }
+                                    // render_flight[key] = reaHasValue;
                                 } else if (preHasValue && reaHasValue) {
                                     if (preHasValue === reaHasValue) {
                                         render_flight[key] = preHasValue
@@ -195,9 +213,17 @@ export class MainComponent implements OnInit {
                                 let preHasValue = row_flights['preFlight'][key];
                                 let reaHasValue = row_flights['reaFlight'][key]
                                 if (preHasValue && !reaHasValue) {
+                                    if (key === 'SODT' || key === 'ESTT' || key === 'ACTT') {
+                                        render_flight[key] = preHasValue + ' / '
+                                    } else {
                                         render_flight[key] = preHasValue;
+                                    }
                                 } else if (!preHasValue && reaHasValue) {
+                                    if (key === 'SODT' || key === 'ESTT' || key === 'ACTT') {
+                                        render_flight[key] = ' / ' + reaHasValue
+                                    } else {
                                         render_flight[key] = reaHasValue;
+                                    }
                                 } else if (preHasValue && reaHasValue) {
                                     if (preHasValue === reaHasValue) {
                                         render_flight[key] = preHasValue
@@ -282,9 +308,13 @@ export class MainComponent implements OnInit {
                 let erutCodeArray = item['renderFlight']['ERUT'].split(' - ');
                 let erutChnArray = []
                 for (let i = 0; i < erutCodeArray.length; i++) {
+                    try {
                         let airportIndex = this.airports.findIndex(val => val.airportCodeIata === erutCodeArray[i]);
                         let cityIndex = this.citys.findIndex(val => this.airports[airportIndex].cityId === val.cityId);
                         erutChnArray.push(this.citys[cityIndex].cityNameChn);
+                    } catch (error) {
+                        erutChnArray.push(erutCodeArray[i]);
+                    }
                 }
                 item['renderFlight']['ERUT'] = erutChnArray.join(' - ');
                 //航空公司处理
@@ -297,11 +327,13 @@ export class MainComponent implements OnInit {
                 let erutLinkCodeArray = item['renderFlight']['ERUT'].split(' - ');
                 let erutLinkChnArray = []
                 for (let i = 0; i < erutLinkCodeArray.length; i++) {
-                    console.log(erutLinkCodeArray[i]);
+                    try {
                         let airportIndex = this.airports.findIndex(val => val.airportCodeIata === erutLinkCodeArray[i]);
-                    console.log(airportIndex);
                         let cityIndex = this.citys.findIndex(val => this.airports[airportIndex].cityId === val.cityId);
                         erutLinkChnArray.push(this.citys[cityIndex].cityNameChn);
+                    } catch (error) {
+                        erutLinkChnArray.push(erutLinkCodeArray[i]);
+                    }
                 }
                 item['renderFlight']['ERUT'] = erutLinkChnArray.join(' - ');
                 //航空公司处理
@@ -319,9 +351,13 @@ export class MainComponent implements OnInit {
                 let erutPreCodeArray = item['renderPreFlight']['ERUT'].split(' - ');
                 let erutPreChnArray = []
                 for (let i = 0; i < erutPreCodeArray.length; i++) {
+                    try {
                         let airportIndex = this.airports.findIndex(val => val.airportCodeIata === erutPreCodeArray[i]);
                         let cityIndex = this.citys.findIndex(val => this.airports[airportIndex].cityId === val.cityId);
                         erutPreChnArray.push(this.citys[cityIndex].cityNameChn);
+                    } catch (error) {
+                        erutPreChnArray.push(erutPreCodeArray[i]);
+                    }
                 }
                 item['renderPreFlight']['ERUT'] = erutPreChnArray.join(' - ');
                 //航空公司处理
@@ -334,9 +370,13 @@ export class MainComponent implements OnInit {
                 let erutReaCodeArray = item['renderReaFlight']['ERUT'].split(' - ');
                 let erutReaChnArray = []
                 for (let i = 0; i < erutReaCodeArray.length; i++) {
+                    try {
                         let airportIndex = this.airports.findIndex(val => val.airportCodeIata === erutReaCodeArray[i]);
                         let cityIndex = this.citys.findIndex(val => this.airports[airportIndex].cityId === val.cityId);
                         erutReaChnArray.push(this.citys[cityIndex].cityNameChn);
+                    } catch (error) {
+                        erutReaChnArray.push(erutReaCodeArray[i]);
+                    }
                 }
                 item['renderReaFlight']['ERUT'] = erutReaChnArray.join(' - ');
                 //航空公司处理
@@ -442,6 +482,7 @@ export class MainComponent implements OnInit {
      * 下拉框选择筛选
      */
     selectChange() {
+        // this.operateSpinServiceService.showSpin()
         let filter_data = [];
         let filterItems = this.filterItems;
         this.combined_data.forEach(item => {
@@ -967,7 +1008,6 @@ export class MainComponent implements OnInit {
      */
     selectRow(i) {
         this.row_state = i;
-        // console.log(i)
         this.changeDetectorRef.detectChanges();
     }
 
@@ -975,12 +1015,89 @@ export class MainComponent implements OnInit {
      * 获取当前单元格颜色
      * @param col_CODE 
      */
-    getColor(col_CODE) {
+    getColor(col_CODE, flight) {
+        if (this.isArriFlight(flight)) {
             if (col_CODE === 'SODT') {
-            return 'skyblue'
+                if (flight['preFlight']['SODT']) {
+                    if (!flight['preFlight']['ESTT'] && !flight['preFlight']['ACTT']) {
+                        return 'rgb(0,255,255)';
                     } else {
-            return null
+                        return null;
+                    }
+                } else {
+                    return null;
+                }
+            } else if (col_CODE === 'ESTT') {
+                if (flight['preFlight']['ESTT']) {
+                    if (!flight['preFlight']['ACTT']) {
+                        return 'rgb(255,207,156)';
+                    } else {
+                        return null;
+                    }
+                } else {
+                    return null;
+                }
+            } else if (col_CODE === 'ACTT') {
+                if (flight['preFlight']['ACTT']) {
+                    return 'rgb(148,207,255)';
+                } else {
+                    return null;
+                }
+            } else {
+                return null;
+            }
+
+        } else {
+            if (col_CODE === 'SODT') {
+                if (flight['reaFlight']['SODT']) {
+                    if (!flight['reaFlight']['ESTT'] && !flight['reaFlight']['ACTT']) {
+                        return 'rgb(0,255,255)';
+                    } else {
+                        return null;
+                    }
+                } else {
+                    return null;
+                }
+            } else if (col_CODE === 'ESTT') {
+                if (flight['reaFlight']['ESTT']) {
+                    if (!flight['reaFlight']['ACTT']) {
+                        return 'rgb(255,207,156)';
+                    } else {
+                        return null;
+                    }
+                } else {
+                    return null;
+                }
+            } else if (col_CODE === 'ACTT') {
+                if (flight['reaFlight']['ACTT']) {
+                    return 'rgb(148,207,255)';
+                } else {
+                    return null;
+                }
+            } else {
+                return null;
+            }
         }
     }
 
+    /**
+     * 单元格内容居左居右
+     * @param col_CODE
+     * @param flight 
+     */
+    getPosition(col_CODE, flight) {
+        if (this.isDeptFlight(flight)) {
+            if (col_CODE === 'FLNO' || col_CODE === 'SODT' || col_CODE === 'ESTT' || col_CODE === 'ACTT') {
+                return 'text-right';
+            }
+        } else if (this.isLinked(flight)) {
+            if (col_CODE === 'SODT' || col_CODE === 'ESTT' || col_CODE === 'ACTT') {
+                if (!flight['renderPreFlight'][col_CODE] && flight['renderReaFlight'][col_CODE]) {
+                    return 'text-right';
+                }
+            }
+        }
+
+    }
+
 }

src/app/pages/operate-spin-service.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { OperateSpinServiceService } from './operate-spin-service.service';
+
+describe('OperateSpinServiceService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [OperateSpinServiceService]
+    });
+  });
+
+  it('should be created', inject([OperateSpinServiceService], (service: OperateSpinServiceService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/pages/operate-spin-service.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs';
+
+@Injectable()
+export class OperateSpinServiceService {
+
+    constructor() { }
+
+    public spinSubject = new Subject();
+    public isSpinning: boolean = false;
+
+    public showSpin() {
+        this.isSpinning = true;
+        this.spinSubject.next(this.isSpinning);
+    }
+
+    public hideSpin() {
+        this.isSpinning = false;
+        this.spinSubject.next(this.isSpinning);
+    }
+}

src/app/pages/pages.component.html

@@ -83,7 +83,10 @@
             </div>
         </div>
         <div class="right-wrapper" [ngClass]="{'right-wrapper-c': menuClose,'right-wrapper-o': !menuClose}">
+            <!-- <nz-spin [nzSpinning]="isSpinning" [nzDelay]="500"> -->
                 <router-outlet></router-outlet>
+            <!-- </nz-spin> -->
+
         </div>
     </div>
 </div>

src/app/pages/pages.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { BasicDataService } from './basic-data-service';
+import { OperateSpinServiceService } from './operate-spin-service.service';
 import { HttpClientService } from '../services/http-client.service';
 
 import { ToastService } from '../components/toast/toast.service';
@@ -17,6 +18,7 @@ import { filter } from 'rxjs/operators';
 })
 export class PagesComponent implements OnInit {
     public menuClose: boolean = false;
+    public isSpinning: any = false;
     menuData = [
         {
             "name": "航班动态",
@@ -186,9 +188,11 @@ export class PagesComponent implements OnInit {
                 },
             ]
         }]
+
     constructor(
         private router: Router,
         private basicDataService: BasicDataService,
+        // private operateSpinService: OperateSpinServiceService,
         private httpClient: HttpClientService,
         private toastService: ToastService,
     ) {
@@ -205,6 +209,10 @@ export class PagesComponent implements OnInit {
             this.selectActiveMenu(this.menuData, event['urlAfterRedirects'])
         });
 
+        // this.operateSpinService.spinSubject.subscribe(
+        //     val => this.isSpinning = val
+        // )
+
     }
 
     toggleMenu() {

src/app/pages/pages.module.ts

@@ -8,7 +8,8 @@ import { PagesRoutingModule } from './pages-routing.module';
 import { SidebarMenuModule } from '../components/sidebar-menu/sidebar-menu.module';
 import { BarMenuModule } from '../components/bar-menu/bar-menu.module';
 
-import { BasicDataService } from './basic-data-service'
+import { BasicDataService } from './basic-data-service';
+import { OperateSpinServiceService } from './operate-spin-service.service';
 
 @NgModule({
     imports: [

src/app/services/websocket.service.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+var INSECURE = 'ws://';
+var SECURE = 'wss://';
+@Injectable()
+
+export class WebsocketService {
+    public websocket: WebSocket;
+    constructor() { }
+
+    dynamicsMessage() {
+        let url = ("ws://" + window.location.host + "/v2/broker/?topics=topic2");
+
+        if (window.location.protocol === 'https:' && url.indexOf(INSECURE) === 0) {
+            url = SECURE + url.substr(INSECURE.length);
+        }
+
+        this.websocket = new WebSocket(url);
+        return new Observable(ob => {
+            this.websocket.onopen = () => {
+                console.log('websocket was connected...')
+            }
+            this.websocket.onmessage = (event) => {
+                ob.next(event.data)
+            }
+            this.websocket.onerror = () => {
+                ob.error("连接失败")
+            }
+            this.websocket.onclose = () => {
+                ob.complete();
+            }
+        })
+    }
+}

src/assets/mock-data/airline-col_code.json

@@ -82,7 +82,7 @@
     {
         "COL_CODE":"ACTT",
         "COL_CN":"实际到达/出发",
-        "COL_ORDER":"8"
+        "COL_ORDER":"7"
     },
     {
         "COL_CODE":"PSST",
@@ -147,7 +147,7 @@
     {
         "COL_CODE":"PADT",
         "COL_CN":"前站起飞时间",
-        "COL_ORDER":"7"
+        "COL_ORDER":"8"
     },
     {
         "COL_CODE":"CSFT",