28 changed files with 262 additions and 269 deletions
@ -1,6 +1,6 @@
|
||||
{ |
||||
"/api": { |
||||
"target": "http://39.106.78.171:8900", |
||||
"target": "http://39.106.78.171:8906", |
||||
"secure": false, |
||||
"changeOrigin": true |
||||
} |
||||
|
||||
@ -1,35 +0,0 @@
|
||||
import { TestBed, async } from '@angular/core/testing'; |
||||
import { RouterTestingModule } from '@angular/router/testing'; |
||||
import { AppComponent } from './app.component'; |
||||
|
||||
describe('AppComponent', () => { |
||||
beforeEach(async(() => { |
||||
TestBed.configureTestingModule({ |
||||
imports: [ |
||||
RouterTestingModule |
||||
], |
||||
declarations: [ |
||||
AppComponent |
||||
], |
||||
}).compileComponents(); |
||||
})); |
||||
|
||||
it('should create the app', () => { |
||||
const fixture = TestBed.createComponent(AppComponent); |
||||
const app = fixture.debugElement.componentInstance; |
||||
expect(app).toBeTruthy(); |
||||
}); |
||||
|
||||
it(`should have as title 'anxin119'`, () => { |
||||
const fixture = TestBed.createComponent(AppComponent); |
||||
const app = fixture.debugElement.componentInstance; |
||||
expect(app.title).toEqual('anxin119'); |
||||
}); |
||||
|
||||
it('should render title', () => { |
||||
const fixture = TestBed.createComponent(AppComponent); |
||||
fixture.detectChanges(); |
||||
const compiled = fixture.debugElement.nativeElement; |
||||
expect(compiled.querySelector('.content span').textContent).toContain('anxin119 app is running!'); |
||||
}); |
||||
}); |
||||
@ -1 +1,3 @@
|
||||
<p>plan works!</p> |
||||
<div class="content"> |
||||
<canvas id="center"></canvas> |
||||
</div> |
||||
@ -0,0 +1,7 @@
|
||||
.content{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
position: relative; |
||||
canvas{ width: 100%; height: 100%; border: none; outline: none; } |
||||
} |
||||
@ -1 +1,58 @@
|
||||
<p>今日预警</p> |
||||
<div class="warningbox"> |
||||
<div class="title"> |
||||
当日违规事件列表 |
||||
</div> |
||||
<div class="search"> |
||||
<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> |
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select id="level" formControlName="level" nzPlaceHolder="请选择级别"> |
||||
<nz-option nzValue="1" nzLabel="一级"></nz-option> |
||||
<nz-option nzValue="2" nzLabel="二级"></nz-option> |
||||
<nz-option nzValue="3" nzLabel="三级"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select id="type" formControlName="type" nzPlaceHolder="请选择事件类型"> |
||||
<nz-option nzValue="1" nzLabel="一级"></nz-option> |
||||
<nz-option nzValue="2" nzLabel="二级"></nz-option> |
||||
<nz-option nzValue="3" nzLabel="三级"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control> |
||||
<nz-select id="site" formControlName="site" nzPlaceHolder="请选择地点"> |
||||
<nz-option nzValue="1" nzLabel="一级"></nz-option> |
||||
<nz-option nzValue="2" nzLabel="二级"></nz-option> |
||||
<nz-option nzValue="3" nzLabel="三级"></nz-option> |
||||
</nz-select> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="searchParams"> |
||||
<nz-form-control [nzSm]="16" [nzXs]="24"> |
||||
<nz-date-picker id="datePicker" formControlName="datePicker" nzPlaceHolder="请选择时间"></nz-date-picker> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
|
||||
<nz-form-item style="margin-right: 0;" class="btn"> |
||||
<nz-form-control> |
||||
<button nz-button type="button" class="reset"><i nz-icon [nzType]="'sync'"></i>重置</button> |
||||
</nz-form-control> |
||||
</nz-form-item> |
||||
</form> |
||||
</div> |
||||
|
||||
|
||||
</div> |
||||
|
||||
@ -0,0 +1,39 @@
|
||||
.warningbox{ |
||||
width: 100%; |
||||
height: 100%; |
||||
.title{ |
||||
width: 100%; |
||||
height: 50px; |
||||
line-height: 50px; |
||||
} |
||||
.search{ |
||||
box-sizing: border-box; |
||||
padding: 0 36px; |
||||
width: 100%; |
||||
height: 32px; |
||||
form{ |
||||
width: 100%; |
||||
height: 32px; |
||||
} |
||||
.searchParams{ |
||||
width: 21.5%; |
||||
} |
||||
nz-date-picker{ |
||||
width: 145%; |
||||
background-color: #002552; |
||||
color: #8aacce; |
||||
} |
||||
button{ |
||||
width: 84px; |
||||
} |
||||
.submit{ |
||||
background-color: #013064; |
||||
border: 1px solid #4c8ac8; |
||||
color: #86bff3; |
||||
} |
||||
.reset{ |
||||
background-color: #010d26; |
||||
border: 1px solid #4c8ac8; |
||||
} |
||||
} |
||||
} |
||||
@ -1,15 +1,29 @@
|
||||
import { Component, OnInit } from '@angular/core'; |
||||
|
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
@Component({ |
||||
selector: 'app-today-warning', |
||||
templateUrl: './today-warning.component.html', |
||||
styleUrls: ['./today-warning.component.scss'] |
||||
}) |
||||
export class TodayWarningComponent implements OnInit { |
||||
|
||||
constructor() { } |
||||
validateForm!: FormGroup; |
||||
constructor(private fb: FormBuilder) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.validateForm = this.fb.group({ |
||||
level: [null], |
||||
type: [null], |
||||
site: [null], |
||||
datePicker: [null] |
||||
}); |
||||
} |
||||
|
||||
submitForm(): void { |
||||
for (const i in this.validateForm.controls) { |
||||
this.validateForm.controls[i].markAsDirty(); |
||||
this.validateForm.controls[i].updateValueAndValidity(); |
||||
} |
||||
|
||||
console.log(this.validateForm) |
||||
} |
||||
} |
||||
|
||||
@ -1,99 +0,0 @@
|
||||
import { NgModule } from '@angular/core'; |
||||
import { CommonModule } from '@angular/common'; |
||||
import { A11yModule } from '@angular/cdk/a11y'; |
||||
import { DragDropModule } from '@angular/cdk/drag-drop'; |
||||
import { PortalModule } from '@angular/cdk/portal'; |
||||
import { ScrollingModule } from '@angular/cdk/scrolling'; |
||||
import { CdkStepperModule } from '@angular/cdk/stepper'; |
||||
import { CdkTableModule } from '@angular/cdk/table'; |
||||
import { CdkTreeModule } from '@angular/cdk/tree'; |
||||
import { MatAutocompleteModule } from '@angular/material/autocomplete'; |
||||
import { MatBadgeModule } from '@angular/material/badge'; |
||||
import { MatBottomSheetModule } from '@angular/material/bottom-sheet'; |
||||
import { MatButtonModule } from '@angular/material/button'; |
||||
import { MatButtonToggleModule } from '@angular/material/button-toggle'; |
||||
import { MatCardModule } from '@angular/material/card'; |
||||
import { MatCheckboxModule } from '@angular/material/checkbox'; |
||||
import { MatStepperModule } from '@angular/material/stepper'; |
||||
import { MatChipsModule } from '@angular/material/chips'; |
||||
import { MatDatepickerModule } from '@angular/material/datepicker'; |
||||
import { MatDialogModule } from '@angular/material/dialog'; |
||||
import { MatDividerModule } from '@angular/material/divider'; |
||||
import { MatExpansionModule } from '@angular/material/expansion'; |
||||
import { MatGridListModule } from '@angular/material/grid-list'; |
||||
import { MatIconModule } from '@angular/material/icon'; |
||||
import { MatInputModule } from '@angular/material/input'; |
||||
import { MatListModule } from '@angular/material/list'; |
||||
import { MatMenuModule } from '@angular/material/menu'; |
||||
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core'; |
||||
import { MatPaginatorModule } from '@angular/material/paginator'; |
||||
import { MatProgressBarModule } from '@angular/material/progress-bar'; |
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; |
||||
import { MatRadioModule } from '@angular/material/radio'; |
||||
import { MatSelectModule } from '@angular/material/select'; |
||||
import { MatSidenavModule } from '@angular/material/sidenav'; |
||||
import { MatSliderModule } from '@angular/material/slider'; |
||||
import { MatSlideToggleModule } from '@angular/material/slide-toggle'; |
||||
import { MatSnackBarModule } from '@angular/material/snack-bar'; |
||||
import { MatSortModule } from '@angular/material/sort'; |
||||
import { MatTableModule } from '@angular/material/table'; |
||||
import { MatTabsModule } from '@angular/material/tabs'; |
||||
import { MatToolbarModule } from '@angular/material/toolbar'; |
||||
import { MatTooltipModule } from '@angular/material/tooltip'; |
||||
import { MatTreeModule } from '@angular/material/tree'; |
||||
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; |
||||
import { ThreeHomeComponent } from './three-home/three-home.component'; |
||||
|
||||
|
||||
|
||||
@NgModule({ |
||||
declarations: [ThreeHomeComponent], |
||||
imports: [ |
||||
CommonModule, |
||||
A11yModule, |
||||
DragDropModule, |
||||
PortalModule, |
||||
ScrollingModule, |
||||
CdkStepperModule, |
||||
CdkTableModule, |
||||
CdkTreeModule, |
||||
MatAutocompleteModule, |
||||
MatBadgeModule, |
||||
MatBottomSheetModule, |
||||
MatButtonModule, |
||||
MatButtonToggleModule, |
||||
MatCardModule, |
||||
MatCheckboxModule, |
||||
MatChipsModule, |
||||
MatStepperModule, |
||||
MatDatepickerModule, |
||||
MatDialogModule, |
||||
MatDividerModule, |
||||
MatExpansionModule, |
||||
MatGridListModule, |
||||
MatIconModule, |
||||
MatInputModule, |
||||
MatListModule, |
||||
MatMenuModule, |
||||
MatNativeDateModule, |
||||
MatRippleModule, |
||||
MatPaginatorModule, |
||||
MatProgressBarModule, |
||||
MatProgressSpinnerModule, |
||||
MatRadioModule, |
||||
MatSelectModule, |
||||
MatSidenavModule, |
||||
MatSliderModule, |
||||
MatSlideToggleModule, |
||||
MatSnackBarModule, |
||||
MatSortModule, |
||||
MatTableModule, |
||||
MatTabsModule, |
||||
MatToolbarModule, |
||||
MatTooltipModule, |
||||
MatTreeModule, |
||||
FormsModule, |
||||
ReactiveFormsModule, |
||||
] |
||||
}) |
||||
export class ThreeDimensionalModule { } |
||||
@ -1,3 +0,0 @@
|
||||
<div class="content"> |
||||
<canvas id="center"></canvas> |
||||
</div> |
||||
@ -1,7 +0,0 @@
|
||||
.content{ |
||||
width: 100%; |
||||
height: 100%; |
||||
overflow: hidden; |
||||
position: relative; |
||||
canvas{ width: 100%; height: 100%; border: none; outline: none; } |
||||
} |
||||
@ -1,23 +0,0 @@
|
||||
import { Component, ElementRef, OnInit } from '@angular/core'; |
||||
import { Game } from 'src/app/babylon/game'; |
||||
|
||||
@Component({ |
||||
selector: 'app-three-home', |
||||
templateUrl: './three-home.component.html', |
||||
styleUrls: ['./three-home.component.scss'] |
||||
}) |
||||
export class ThreeHomeComponent implements OnInit { |
||||
|
||||
constructor(private element: ElementRef,) { } |
||||
|
||||
static instance: ThreeHomeComponent; |
||||
public game: Game = new Game(); |
||||
public canvas: HTMLCanvasElement; //canvas 实例
|
||||
|
||||
ngOnInit(): void { |
||||
ThreeHomeComponent.instance = this; |
||||
this.canvas = this.element.nativeElement.querySelector('#center') as HTMLCanvasElement; |
||||
this.game.init(this.canvas); |
||||
} |
||||
|
||||
} |
||||
@ -1,9 +1,23 @@
|
||||
.box{ |
||||
width: 100%; |
||||
height: 62px; |
||||
height: 52px; |
||||
background-image: linear-gradient(#001530, #051C3C ,#162f50, #243c55); |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
color: #fff; |
||||
box-sizing: border-box; |
||||
padding: 0 20px; |
||||
color: #8aacce; |
||||
} |
||||
.boxleft{ |
||||
font-size: 18px; |
||||
font-weight: 500; |
||||
// text-shadow: 0px 0px 2px #8df; |
||||
color: rgb(255, 255, 255); |
||||
} |
||||
.boxright{ |
||||
span{ |
||||
font-size: 15px; |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,28 @@
|
||||
@import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; |
||||
|
||||
// @component-background: #002552; |
||||
|
||||
@border-color-base: #8aacce; |
||||
|
||||
// @text-color: #8aacce; |
||||
@text-color: #8aacce; |
||||
// @select-item-selected-bg: red; |
||||
|
||||
|
||||
|
||||
@select-background:#002552; |
||||
|
||||
.ant-select-arrow { |
||||
color: #8aacce; |
||||
} |
||||
.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{ |
||||
border-radius: 0px; |
||||
} |
||||
.ant-picker{ |
||||
border-radius: 0px; |
||||
} |
||||
|
||||
@input-placeholder-color: #8aacce; |
||||
.ant-picker-suffix{ |
||||
color: #8aacce; |
||||
} |
||||
Loading…
Reference in new issue