windy/airport-chengdu-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

创建websocket服务和spin服务

Browse Source
This commit is contained in:
zhouyuejun
2018-11-29 10:40:23 +08:00
parent bb2779e6e8
commit 2871120616
12 changed files with 293 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
proxy.conf.json
+10 -5
View File
@@ -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
+5 -1
View File
@@ -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
+1 -1
View File
@@ -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
+48 -21
View File
@@ -27,62 +27,89 @@
}
}
}
.airline-table{
.table-container{
.airline-table {
.table-container {
display: inline-block;
// border: 1px solid #ccc;
width: 100%;
height: 700px;
overflow: auto;
box-shadow: 0 0 1px .5px #ddd;
table{
box-shadow: 0 0 1px 0.5px #ddd;
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{
// border: none;
text-align: center;
}
// th,td{
// // border: none;
// // 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);
padding-bottom: 0;
color: rgba(0, 0, 0, 0.65);
padding-bottom: 0;
}
}
}
&::-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;
}
}
.table-c{
.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
+142 -25
View File
@@ -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) {
render_flight[key] = preHasValue;
if (key === 'SODT' || key === 'ESTT' || key === 'ACTT') {
render_flight[key] = preHasValue + ' / '
} else {
render_flight[key] = preHasValue;
}
} else if (!preHasValue && reaHasValue) {
render_flight[key] = 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) {
render_flight[key] = preHasValue;
if (key === 'SODT' || key === 'ESTT' || key === 'ACTT') {
render_flight[key] = preHasValue + ' / '
} else {
render_flight[key] = preHasValue;
}
} else if (!preHasValue && reaHasValue) {
render_flight[key] = 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++) {
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);
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]);
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);
try {
let airportIndex = this.airports.findIndex(val => val.airportCodeIata === erutLinkCodeArray[i]);
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++) {
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);
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++) {
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);
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) {
if (col_CODE === 'SODT') {
return 'skyblue'
getColor(col_CODE, flight) {
if (this.isArriFlight(flight)) {
if (col_CODE === 'SODT') {
if (flight['preFlight']['SODT']) {
if (!flight['preFlight']['ESTT'] && !flight['preFlight']['ACTT']) {
return 'rgb(0,255,255)';
} else {
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 {
return null
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
+15
View File
@@ -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
+21
View File
@@ -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
+4 -1
View File
@@ -83,7 +83,10 @@
</div>
</div>
<div class="right-wrapper" [ngClass]="{'right-wrapper-c': menuClose,'right-wrapper-o': !menuClose}">
<router-outlet></router-outlet>
<!-- <nz-spin [nzSpinning]="isSpinning" [nzDelay]="500"> -->
<router-outlet></router-outlet>
<!-- </nz-spin> -->
</div>
</div>
</div>
src/app/pages/pages.component.ts
+8
View File
@@ -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
+2 -1
View File
@@ -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
+35
View File
@@ -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
+2 -2
View File
@@ -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",