47 changed files with 723 additions and 429 deletions
@ -1,27 +0,0 @@ |
|||||||
<mat-sidenav-container class="example-container" autosize> |
|
||||||
<mat-sidenav #drawer class="example-sidenav" mode="side" opened="true" color="primary" style="overflow-x: hidden;"> |
|
||||||
<div class="biglogobox"> |
|
||||||
<img src="../../assets/images/logo2.png" alt=""> |
|
||||||
</div> |
|
||||||
<div class="navbox"> |
|
||||||
<ul> |
|
||||||
<!-- basicinfo --> |
|
||||||
<!-- <li [routerLink]="['/datacollection/basicinfo']" routerLinkActive="router-link-active">基本信息</li> --> |
|
||||||
<li>基本信息</li> |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</mat-sidenav> |
|
||||||
|
|
||||||
<button type="button" mat-button (click)="drawer.toggle()" class="shownav"> |
|
||||||
<mat-icon>menu</mat-icon> |
|
||||||
</button> |
|
||||||
|
|
||||||
<div class="example-sidenav-content"> |
|
||||||
<div style="height: 64px;"> |
|
||||||
<app-tabbar></app-tabbar> |
|
||||||
</div> |
|
||||||
<div style="flex: 1; overflow: hidden;"> |
|
||||||
<router-outlet></router-outlet> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</mat-sidenav-container> |
|
||||||
@ -1,152 +0,0 @@ |
|||||||
|
|
||||||
.example-container { |
|
||||||
width: 100%; |
|
||||||
height:100%; |
|
||||||
border: 1px solid rgba(0, 0, 0, 0.5); |
|
||||||
overflow: hidden; |
|
||||||
} |
|
||||||
mat-accordion{ |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
mat-sidenav{ |
|
||||||
box-shadow: 2px 0px 5px #888888; |
|
||||||
color: white; |
|
||||||
background-color: #3c4252; |
|
||||||
width: 240px; |
|
||||||
overflow-x: hidden; |
|
||||||
p{ |
|
||||||
height: 48px; |
|
||||||
cursor: pointer; |
|
||||||
font-size: 16px; |
|
||||||
line-height: 48px; |
|
||||||
} |
|
||||||
ul{ |
|
||||||
width: 100%; |
|
||||||
|
|
||||||
li{ |
|
||||||
list-style: none; |
|
||||||
height: 48px; |
|
||||||
line-height: 48px; |
|
||||||
cursor: pointer; |
|
||||||
background: white; |
|
||||||
padding-left: 55px; |
|
||||||
background-color: #3c4252; |
|
||||||
color: white; |
|
||||||
border: none; |
|
||||||
outline: none; |
|
||||||
} |
|
||||||
.superli{ |
|
||||||
padding-left: 66px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.logobox{ |
|
||||||
border-radius: 50%; |
|
||||||
width: 64px; |
|
||||||
height: 64px; |
|
||||||
|
|
||||||
background:url("https://img5.tianyancha.com/logo/lll/cce72488294fb8f4bc670a5bb7f0cc4d.png@!f_200x200") no-repeat; |
|
||||||
background-size: 100%; |
|
||||||
margin: 0px auto; |
|
||||||
|
|
||||||
img{ |
|
||||||
width: 100%; |
|
||||||
height: 100%; |
|
||||||
} |
|
||||||
|
|
||||||
} |
|
||||||
.shownav{ |
|
||||||
position: absolute; |
|
||||||
top: 13px; |
|
||||||
z-index: 200; |
|
||||||
|
|
||||||
} |
|
||||||
.mat-accordion .mat-expansion-panel:first-of-type { |
|
||||||
border-top-right-radius:0px; |
|
||||||
border-top-left-radius:0px; |
|
||||||
} |
|
||||||
.mat-accordion .mat-expansion-panel:last-of-type { |
|
||||||
border-bottom-right-radius: 0px; |
|
||||||
border-bottom-left-radius: 0px; |
|
||||||
} |
|
||||||
.mat-expansion-panel{ |
|
||||||
border-radius: 0px; |
|
||||||
} |
|
||||||
.mat-expansion-panel-spacing { |
|
||||||
margin: 0px; |
|
||||||
} |
|
||||||
.superdiv{ |
|
||||||
padding-left: 31px; |
|
||||||
} |
|
||||||
mat-icon{ |
|
||||||
color: white; |
|
||||||
} |
|
||||||
.navbox{ |
|
||||||
position: absolute; |
|
||||||
left: 0px; |
|
||||||
top: 153px; |
|
||||||
right: -18px; |
|
||||||
bottom: 0px; |
|
||||||
overflow-y: scroll; |
|
||||||
} |
|
||||||
mat-sidenav-container.myapp-dark-theme{ |
|
||||||
background-color: #fafafa; |
|
||||||
color: black; |
|
||||||
mat-panel-title{ |
|
||||||
color: black; |
|
||||||
} |
|
||||||
ul li{ |
|
||||||
background-color: white; |
|
||||||
color: black; |
|
||||||
} |
|
||||||
.biglogobox{ |
|
||||||
background-color: #d50000; |
|
||||||
} |
|
||||||
color: black; |
|
||||||
} |
|
||||||
.biglogobox{ |
|
||||||
width: 250px; |
|
||||||
background-color: #42a5f5; |
|
||||||
padding-top: 15px; |
|
||||||
display: block; |
|
||||||
text-align: center; |
|
||||||
line-height:40px; |
|
||||||
position: relative; |
|
||||||
color: #FFF; |
|
||||||
font-size: 2em; |
|
||||||
margin: 0 auto; |
|
||||||
margin-bottom: 100px; |
|
||||||
img{ |
|
||||||
margin-right: 11px; |
|
||||||
} |
|
||||||
} |
|
||||||
mat-panel-title mat-icon{ |
|
||||||
color: #afb2bb; |
|
||||||
font-size: 16px; |
|
||||||
line-height: 24px; |
|
||||||
margin-right: 6px; |
|
||||||
} |
|
||||||
mat-expansion-panel{ |
|
||||||
background-color: #3c4252; |
|
||||||
mat-panel-title{ |
|
||||||
color: white; |
|
||||||
|
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.mat-expansion-indicator::after { |
|
||||||
color: white; |
|
||||||
} |
|
||||||
|
|
||||||
.example-container .navbox .router-link-active { |
|
||||||
background-color: rgba(225,225,225,.5); |
|
||||||
border:0 |
|
||||||
} |
|
||||||
.example-sidenav-content{ |
|
||||||
height: 100%; |
|
||||||
overflow: hidden; |
|
||||||
display: flex; |
|
||||||
flex-direction: column; |
|
||||||
} |
|
||||||
@ -1,25 +0,0 @@ |
|||||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing'; |
|
||||||
|
|
||||||
import { NavigationComponent } from './navigation.component'; |
|
||||||
|
|
||||||
describe('NavigationComponent', () => { |
|
||||||
let component: NavigationComponent; |
|
||||||
let fixture: ComponentFixture<NavigationComponent>; |
|
||||||
|
|
||||||
beforeEach(async(() => { |
|
||||||
TestBed.configureTestingModule({ |
|
||||||
declarations: [ NavigationComponent ] |
|
||||||
}) |
|
||||||
.compileComponents(); |
|
||||||
})); |
|
||||||
|
|
||||||
beforeEach(() => { |
|
||||||
fixture = TestBed.createComponent(NavigationComponent); |
|
||||||
component = fixture.componentInstance; |
|
||||||
fixture.detectChanges(); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should create', () => { |
|
||||||
expect(component).toBeTruthy(); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,107 +0,0 @@ |
|||||||
import { NgModule } from '@angular/core'; |
|
||||||
import { CommonModule } from '@angular/common'; |
|
||||||
import { NavigationComponent } from './navigation.component'; |
|
||||||
import { MatIconModule } from '@angular/material/icon'; |
|
||||||
import { MatSidenavModule } from '@angular/material/sidenav'; |
|
||||||
import { RouterModule } from '@angular/router'; |
|
||||||
import { FormsModule } from '@angular/forms'; |
|
||||||
import { UiModule } from '../ui/ui.module'; |
|
||||||
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 {MatChipsModule} from '@angular/material/chips'; |
|
||||||
import {MatStepperModule} from '@angular/material/stepper'; |
|
||||||
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 {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 {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'; |
|
||||||
|
|
||||||
@NgModule({ |
|
||||||
declarations: [ |
|
||||||
NavigationComponent |
|
||||||
], |
|
||||||
imports: [ |
|
||||||
CommonModule, |
|
||||||
MatSidenavModule, |
|
||||||
RouterModule, |
|
||||||
MatIconModule, |
|
||||||
FormsModule, |
|
||||||
UiModule, |
|
||||||
A11yModule, |
|
||||||
CdkStepperModule, |
|
||||||
CdkTableModule, |
|
||||||
CdkTreeModule, |
|
||||||
DragDropModule, |
|
||||||
MatAutocompleteModule, |
|
||||||
MatBadgeModule, |
|
||||||
MatBottomSheetModule, |
|
||||||
MatButtonModule, |
|
||||||
MatButtonToggleModule, |
|
||||||
MatCardModule, |
|
||||||
MatCheckboxModule, |
|
||||||
MatChipsModule, |
|
||||||
MatStepperModule, |
|
||||||
MatDatepickerModule, |
|
||||||
MatDialogModule, |
|
||||||
MatDividerModule, |
|
||||||
MatExpansionModule, |
|
||||||
MatGridListModule, |
|
||||||
MatIconModule, |
|
||||||
MatInputModule, |
|
||||||
MatListModule, |
|
||||||
MatMenuModule, |
|
||||||
MatNativeDateModule, |
|
||||||
MatPaginatorModule, |
|
||||||
MatProgressBarModule, |
|
||||||
MatProgressSpinnerModule, |
|
||||||
MatRadioModule, |
|
||||||
MatRippleModule, |
|
||||||
MatSelectModule, |
|
||||||
MatSidenavModule, |
|
||||||
MatSliderModule, |
|
||||||
MatSlideToggleModule, |
|
||||||
MatSnackBarModule, |
|
||||||
MatSortModule, |
|
||||||
MatTableModule, |
|
||||||
MatTabsModule, |
|
||||||
MatToolbarModule, |
|
||||||
MatTooltipModule, |
|
||||||
MatTreeModule, |
|
||||||
PortalModule, |
|
||||||
ScrollingModule, |
|
||||||
], |
|
||||||
exports: [ |
|
||||||
NavigationComponent |
|
||||||
] |
|
||||||
}) |
|
||||||
export class NavigationModule { } |
|
||||||
@ -0,0 +1,159 @@ |
|||||||
|
<div class="recordsbox"> |
||||||
|
<div class="search"> |
||||||
|
<form nz-form [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> |
||||||
|
<nz-range-picker formControlName="datePicker"></nz-range-picker> |
||||||
|
<br /> |
||||||
|
</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 class="btn"> |
||||||
|
<nz-form-control> |
||||||
|
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon |
||||||
|
[nzType]="'sync'"></i>重置</button> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
<div class="content"> |
||||||
|
<div class="title"> |
||||||
|
<app-title [name]="'违规类型统计'"></app-title> |
||||||
|
</div> |
||||||
|
<div class="chartsbox"> |
||||||
|
<div class="chart"> |
||||||
|
<div class="leftbox"> |
||||||
|
<span class="chartname"> |
||||||
|
<img src="../../../assets/images/flower.png" alt=""> |
||||||
|
违规事件统计 |
||||||
|
</span> |
||||||
|
<div class="centerContent"> |
||||||
|
<div class="numname">违规事件总数</div> |
||||||
|
<div class="num">206</div> |
||||||
|
</div> |
||||||
|
<div class="piechart" id="piechart"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="rightbox"> |
||||||
|
<span class="chartname"> |
||||||
|
<img src="../../../assets/images/flower.png" alt=""> |
||||||
|
违规趋势 |
||||||
|
</span> |
||||||
|
<div class="barchart" id="barchart"> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="title"> |
||||||
|
<app-title [name]="'违规类型统计'"></app-title> |
||||||
|
</div> |
||||||
|
<div class="tablebox"> |
||||||
|
<div class="table"> |
||||||
|
<div nz-row class="th"> |
||||||
|
<div nz-col nzSpan="4" style="box-sizing: border-box;padding-left: 18px;"> |
||||||
|
事件编号 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="2"> |
||||||
|
事件级别 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
事件类型 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="2"> |
||||||
|
区域 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="1"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
加油站 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
地点 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
违规时间 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="1"> |
||||||
|
操作 |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="tbody"> |
||||||
|
<div nz-row class="tr" *ngFor="let item of list"> |
||||||
|
<div nz-col nzSpan="4" style="box-sizing: border-box;padding-left: 18px;"> |
||||||
|
{{item.id}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="2"> |
||||||
|
{{item.level}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
{{item.type}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="2"> |
||||||
|
山东淄博 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="1" style="text-align: right;box-sizing: border-box;padding-right: 8px;"> |
||||||
|
自营 |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="4"> |
||||||
|
{{item.name}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
{{item.site}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="3"> |
||||||
|
{{item.time}} |
||||||
|
</div> |
||||||
|
<div nz-col nzSpan="1" > |
||||||
|
<span (click)="look()">查看</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="pagination"> |
||||||
|
<nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate" |
||||||
|
nzShowQuickJumper></nz-pagination> |
||||||
|
<ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
@ -0,0 +1,176 @@ |
|||||||
|
.recordsbox { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.search { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 36px; |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
margin-top: 14px; |
||||||
|
|
||||||
|
form { |
||||||
|
width: 100%; |
||||||
|
height: 32px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-around; |
||||||
|
|
||||||
|
.searchParams { |
||||||
|
width: 22%; |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
width: 5%; |
||||||
|
} |
||||||
|
|
||||||
|
nz-select { |
||||||
|
color: rgba(145, 204, 255, 0.95); |
||||||
|
} |
||||||
|
|
||||||
|
nz-range-picker { |
||||||
|
background-color: rgba(0, 0, 0, 0); |
||||||
|
width: 97%; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.title { |
||||||
|
width: 100%; |
||||||
|
height: 64px; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 28px; |
||||||
|
margin: 13px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.chartsbox { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
|
||||||
|
.chart { |
||||||
|
width: 97%; |
||||||
|
height: 360px; |
||||||
|
border: 0px; |
||||||
|
box-shadow: 0 0 26px 0px #1a7fd7 inset; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 18px 26px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
div { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
span { |
||||||
|
font-family: titlefont; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
height: 28px; |
||||||
|
color: #bee1ff; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
div { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.piechart {} |
||||||
|
|
||||||
|
.barchart { |
||||||
|
border: 1px solid rgba(145, 204, 255, 0.95); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.leftbox { |
||||||
|
width: 360px; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.centerContent { |
||||||
|
position: absolute; |
||||||
|
top: 42%; |
||||||
|
left: 11%; |
||||||
|
width: 170px; |
||||||
|
|
||||||
|
div { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.numname { |
||||||
|
font-family: titlefont; |
||||||
|
color: #bee1ff; |
||||||
|
} |
||||||
|
|
||||||
|
.num { |
||||||
|
color: #FFFFFF; |
||||||
|
font-size: 42px; |
||||||
|
text-shadow: 0px 0px 16px #3A9AFF; |
||||||
|
font-weight: bold; |
||||||
|
height: 49px; |
||||||
|
line-height: 50px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.rightbox { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tablebox { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.table { |
||||||
|
color: white; |
||||||
|
flex: 1; |
||||||
|
width: 96%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.th { |
||||||
|
height: 38px; |
||||||
|
line-height: 38px; |
||||||
|
background: #054783; |
||||||
|
} |
||||||
|
|
||||||
|
.tbody { |
||||||
|
flex: 1; |
||||||
|
overflow-y: auto; |
||||||
|
|
||||||
|
.tr { |
||||||
|
height: 38px; |
||||||
|
line-height: 38px; |
||||||
|
border-bottom: 1px solid #0d3761; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin: 15px 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-scrollbar { |
||||||
|
width: 0px; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,131 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||||
|
import { Router } from '@angular/router' |
||||||
|
import * as echarts from 'echarts'; |
||||||
|
@Component({ |
||||||
|
selector: 'app-criminal-records-admin', |
||||||
|
templateUrl: './criminal-records-admin.component.html', |
||||||
|
styleUrls: ['./criminal-records-admin.component.scss'] |
||||||
|
}) |
||||||
|
export class CriminalRecordsAdminComponent implements OnInit { |
||||||
|
|
||||||
|
validateForm!: FormGroup; |
||||||
|
constructor(private fb: FormBuilder, private router: Router) { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.validateForm = this.fb.group({ |
||||||
|
level: [null], |
||||||
|
type: [null], |
||||||
|
site: [null], |
||||||
|
datePicker: [null] |
||||||
|
}); |
||||||
|
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
let myChart = echarts.init(document.getElementById('piechart')); |
||||||
|
let option = { |
||||||
|
color: ['#FF4B65', '#23D9FF', '#608AFF', '#B2FF6D', '#FFFF99', '#C4E2FC', '#FF7F00', '#0090FF', '#FFD634', '#105597', '#FF4B65', '#23D9FF', '#71FFF5', '#B2FF6D'], |
||||||
|
tooltip: { |
||||||
|
trigger: 'item'//触发类型
|
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
// name: 'Access From',
|
||||||
|
type: 'pie', |
||||||
|
radius: [85, 112],//内半径外，外半径
|
||||||
|
left: '-30%', |
||||||
|
avoidLabelOverlap: false,//防止标签重叠策略
|
||||||
|
label: {//每一个标签外网延伸的引导说明
|
||||||
|
show: false, |
||||||
|
position: 'outside' |
||||||
|
}, |
||||||
|
labelLine: {//引导线
|
||||||
|
show: true, |
||||||
|
showAbove: true |
||||||
|
}, |
||||||
|
emphasis: {//中间高亮区域
|
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
fontSize: '40', |
||||||
|
fontWeight: 'bold' |
||||||
|
} |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ value: 26, name: '工作人员倚靠加油机或者立柱1' }, |
||||||
|
{ value: 86, name: '工作人员倚靠加油机或者立柱2' }, |
||||||
|
{ value: 34, name: '工作人员倚靠加油机或者立柱3' }, |
||||||
|
{ value: 55, name: '工作人员倚靠加油机或者立柱4' }, |
||||||
|
{ value: 60, name: '工作人员倚靠加油机或者立柱5' }, |
||||||
|
{ value: 26, name: '工作人员倚靠加油机或者立柱6' }, |
||||||
|
{ value: 86, name: '工作人员倚靠加油机或者立柱7' }, |
||||||
|
{ value: 34, name: '工作人员倚靠加油机或者立柱8' }, |
||||||
|
{ value: 55, name: '工作人员倚靠加油机或者立柱9' }, |
||||||
|
{ value: 60, name: '工作人员倚靠加油机或者立柱10' }, |
||||||
|
{ value: 26, name: '工作人员倚靠加油机或者立柱11' }, |
||||||
|
{ value: 86, name: '工作人员倚靠加油机或者立柱12' }, |
||||||
|
{ value: 34, name: '工作人员倚靠加油机或者立柱13' }, |
||||||
|
{ value: 55, name: '工作人员倚靠加油机或者立柱14' }, |
||||||
|
{ value: 60, name: '工作人员倚靠加油机或者立柱15' }, |
||||||
|
{ value: 26, name: '工作人员倚靠加油机或者立柱16' }, |
||||||
|
{ value: 86, name: '工作人员倚靠加油机或者立柱17' }, |
||||||
|
{ value: 34, name: '工作人员倚靠加油机或者立柱18' }, |
||||||
|
{ value: 55, name: '工作人员倚靠加油机或者立柱19' }, |
||||||
|
{ value: 60, name: '工作人员倚靠加油机或者立柱20' } |
||||||
|
], |
||||||
|
tooltip: {//鼠标移入提示
|
||||||
|
position: 'right', |
||||||
|
padding: [14, 19], |
||||||
|
backgroundColor: 'rgba(28, 129, 218, 0.4)', |
||||||
|
textStyle: { |
||||||
|
color: '#fff', |
||||||
|
fontSize: 12 |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
] |
||||||
|
}; |
||||||
|
// 绘制图表
|
||||||
|
myChart.setOption(option); |
||||||
|
} |
||||||
|
submitForm(): void { |
||||||
|
for (const i in this.validateForm.controls) { |
||||||
|
this.validateForm.controls[i].markAsDirty(); |
||||||
|
this.validateForm.controls[i].updateValueAndValidity(); |
||||||
|
} |
||||||
|
|
||||||
|
console.log(this.validateForm) |
||||||
|
} |
||||||
|
resetForm(e: MouseEvent): void { |
||||||
|
e.preventDefault(); |
||||||
|
this.validateForm.reset(); |
||||||
|
for (const key in this.validateForm.controls) { |
||||||
|
this.validateForm.controls[key].markAsPristine(); |
||||||
|
this.validateForm.controls[key].updateValueAndValidity(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
list: any = [ |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }, |
||||||
|
{ id: 'SDFFDCDC484C8DCCCDGG', level: 'Ⅰ级', type: '工作人员倚靠加油机或立柱', name: '中化山东省淄博市第6加油站', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' } |
||||||
|
] |
||||||
|
look() { |
||||||
|
this.router.navigate(['home/records/petrolStation']) |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
<p>系统管理页面</p> |
||||||
@ -0,0 +1 @@ |
|||||||
|
<p>organization works!</p> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-organization', |
||||||
|
templateUrl: './organization.component.html', |
||||||
|
styleUrls: ['./organization.component.scss'] |
||||||
|
}) |
||||||
|
export class OrganizationComponent implements OnInit { |
||||||
|
|
||||||
|
constructor() { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1 @@ |
|||||||
|
<p>role works!</p> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-role', |
||||||
|
templateUrl: './role.component.html', |
||||||
|
styleUrls: ['./role.component.scss'] |
||||||
|
}) |
||||||
|
export class RoleComponent implements OnInit { |
||||||
|
|
||||||
|
constructor() { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import { Routes, RouterModule } from '@angular/router'; |
||||||
|
import { NgModule } from '@angular/core'; |
||||||
|
|
||||||
|
import {AuthGuard} from '../auth.guard' |
||||||
|
|
||||||
|
const routes: Routes = [ |
||||||
|
// { path: 'plan', component: PlanComponent },
|
||||||
|
// { path: 'warning/petrolStation', component: TodayWarningComponent },
|
||||||
|
// { path: 'warning/admin', component: TodayWarningAdminComponent },
|
||||||
|
// { path: 'records/petrolStation', component: CriminalRecordsComponent },
|
||||||
|
// { path: 'records/admin', component: CriminalRecordsAdminComponent }
|
||||||
|
]; |
||||||
|
|
||||||
|
@NgModule({ |
||||||
|
imports: [RouterModule.forChild(routes)], |
||||||
|
exports: [RouterModule] |
||||||
|
}) |
||||||
|
export class SystemRoutingModule { } |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import { NgModule } from '@angular/core'; |
||||||
|
import { CommonModule } from '@angular/common'; |
||||||
|
import { SystemRoutingModule } from './system-management-routing.module'; |
||||||
|
import { OrganizationComponent } from './organization/organization.component'; |
||||||
|
import { UserComponent } from './user/user.component'; |
||||||
|
import { RoleComponent } from './role/role.component'; |
||||||
|
import { NavigationComponent } from './navigation/navigation.component'; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@NgModule({ |
||||||
|
declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent], |
||||||
|
imports: [ |
||||||
|
CommonModule, |
||||||
|
SystemRoutingModule |
||||||
|
] |
||||||
|
}) |
||||||
|
export class SystemManagementModule { } |
||||||
@ -0,0 +1 @@ |
|||||||
|
<p>user works!</p> |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
import { Component, OnInit } from '@angular/core'; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-user', |
||||||
|
templateUrl: './user.component.html', |
||||||
|
styleUrls: ['./user.component.scss'] |
||||||
|
}) |
||||||
|
export class UserComponent implements OnInit { |
||||||
|
|
||||||
|
constructor() { } |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
Before Width: | Height: | Size: 122 KiB |
|
Before Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
Loading…
Reference in new issue