From 2871120616e86cd51769f9ec068ccbe2fbf0ff01 Mon Sep 17 00:00:00 2001
From: zhouyuejun <505127606@qq.com>
Date: Thu, 29 Nov 2018 10:40:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E5=BB=BAwebsocket=E6=9C=8D=E5=8A=A1?=
=?UTF-8?q?=E5=92=8Cspin=E6=9C=8D=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
proxy.conf.json | 15 +-
src/app/app.module.ts | 6 +-
src/app/pages/main/main.component.html | 2 +-
src/app/pages/main/main.component.scss | 69 +++++---
src/app/pages/main/main.component.ts | 167 +++++++++++++++---
.../operate-spin-service.service.spec.ts | 15 ++
src/app/pages/operate-spin-service.service.ts | 21 +++
src/app/pages/pages.component.html | 5 +-
src/app/pages/pages.component.ts | 8 +
src/app/pages/pages.module.ts | 3 +-
src/app/services/websocket.service.ts | 35 ++++
src/assets/mock-data/airline-col_code.json | 4 +-
12 files changed, 293 insertions(+), 57 deletions(-)
create mode 100644 src/app/pages/operate-spin-service.service.spec.ts
create mode 100644 src/app/pages/operate-spin-service.service.ts
create mode 100644 src/app/services/websocket.service.ts
diff --git a/proxy.conf.json b/proxy.conf.json
index d0da7b1..94f622e 100644
--- a/proxy.conf.json
+++ b/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,
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 320b011..60b74b6 100644
--- a/src/app/app.module.ts
+++ b/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]
})
diff --git a/src/app/pages/main/main.component.html b/src/app/pages/main/main.component.html
index 0d7636b..5b9bc66 100644
--- a/src/app/pages/main/main.component.html
+++ b/src/app/pages/main/main.component.html
@@ -151,7 +151,7 @@
[ngClass]="{'selected':row_state['renderFlight']['FLNO']===airline_row['renderFlight']['FLNO']}">
| {{i+1}} |
{{isLast}} |
- {{airline_row['renderFlight'][airline_col.COL_CODE]}} |
+ {{airline_row['renderFlight'][airline_col.COL_CODE]}} |
diff --git a/src/app/pages/main/main.component.scss b/src/app/pages/main/main.component.scss
index bdd34ad..2647a46 100644
--- a/src/app/pages/main/main.component.scss
+++ b/src/app/pages/main/main.component.scss
@@ -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%;
}
}
diff --git a/src/app/pages/main/main.component.ts b/src/app/pages/main/main.component.ts
index a60ac63..baa72ba 100644
--- a/src/app/pages/main/main.component.ts
+++ b/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;
@@ -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';
+ }
+ }
+ }
+
+ }
+
}
\ No newline at end of file
diff --git a/src/app/pages/operate-spin-service.service.spec.ts b/src/app/pages/operate-spin-service.service.spec.ts
new file mode 100644
index 0000000..c538ecc
--- /dev/null
+++ b/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();
+ }));
+});
diff --git a/src/app/pages/operate-spin-service.service.ts b/src/app/pages/operate-spin-service.service.ts
new file mode 100644
index 0000000..38e17ff
--- /dev/null
+++ b/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);
+ }
+}
diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html
index 4493344..2ab9d34 100644
--- a/src/app/pages/pages.component.html
+++ b/src/app/pages/pages.component.html
@@ -83,7 +83,10 @@
-
+
+
+
+
\ No newline at end of file
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts
index 2757b7b..68fcd56 100644
--- a/src/app/pages/pages.component.ts
+++ b/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() {
diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts
index e929922..3e96edd 100644
--- a/src/app/pages/pages.module.ts
+++ b/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: [
diff --git a/src/app/services/websocket.service.ts b/src/app/services/websocket.service.ts
new file mode 100644
index 0000000..3a9dcae
--- /dev/null
+++ b/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();
+ }
+ })
+ }
+}
\ No newline at end of file
diff --git a/src/assets/mock-data/airline-col_code.json b/src/assets/mock-data/airline-col_code.json
index b0f3fed..2290954 100644
--- a/src/assets/mock-data/airline-col_code.json
+++ b/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",