shaojiahao
/
Sinopec-Anxin
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]加油站返回按钮，今日预警数字和弹出框

dev
邵佳豪 3 years ago
parent
3ddc6401bd
commit
ace5bc247e
23 changed files with 313 additions and 72 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      src/app/pages/home/home.component.html
  2. 45
      src/app/pages/home/home.component.scss
  3. 27
      src/app/pages/home/home.component.ts
  4. 8
      src/app/pages/login/login.component.ts
  5. 5
      src/app/pages/pages.module.ts
  6. 6
      src/app/pages/plan-admin/plan-admin.component.scss
  7. 2
      src/app/pages/today-warning-admin/today-warning-admin.component.html
  8. 23
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
  9. 61
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
  10. 20
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
  11. 13
      src/app/pages/today-warning/today-warning.component.html
  12. 19
      src/app/pages/today-warning/today-warning.component.scss
  13. 74
      src/app/pages/today-warning/today-warning.component.ts
  14. 1
      src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.html
  15. 0
      src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.scss
  16. 25
      src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.spec.ts
  17. 15
      src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.ts
  18. 1
      src/app/system-management/navigation/navigation.component.html
  19. 4
      src/app/system-management/navigation/navigation.component.ts
  20. 4
      src/app/system-management/system-management-routing.module.ts
  21. 3
      src/app/system-management/system-management.module.ts
  22. BIN
      src/assets/images/warningnum.png
  23. 15
      src/theme.less

14
src/app/pages/home/home.component.html
Unescape View File

@ -3,13 +3,13 @@
<app-tabbar></app-tabbar>
</div>
<div class="menu">
<li [routerLink]="['/plan']" routerLinkActive="router-link-active">
<li [routerLink]="['/plan']" routerLinkActive="router-link-active">
站点预案
</li>
<li [routerLink]="['/warning']" routerLinkActive="router-link-active">
<li [routerLink]="['/warning']" routerLinkActive="router-link-active">
今日预警
</li>
<li [routerLink]="['/records']" routerLinkActive="router-link-active">
<li [routerLink]="['/records']" routerLinkActive="router-link-active">
违规记录
</li>
<!-- <li [routerLink]="['/equipmentInfo']" routerLinkActive="router-link-active">
@ -18,6 +18,14 @@
<li [routerLink]="['/oliStationInfo']" routerLinkActive="router-link-active">
基本信息
</li> -->
<div class="backbtn" *ngIf="isGasStation">
<button nz-button (click)="goback()">返回</button>
</div>
<div class="warningnumber" *ngIf="isWarning">
<img src="../../../assets/images/warningnum.png" alt="">
<span class="num">39</span>
<span class="today">今日违规</span>
</div>
</div>
<div class="content">
<router-outlet></router-outlet>

45
src/app/pages/home/home.component.scss
Unescape View File

@ -16,6 +16,7 @@
font-size: 17px;
background: url('../../../assets/images/navbg.png') no-repeat;
background-size: 100% 100%;
position: relative;
li {
width: 10%;
@ -26,6 +27,50 @@
font-family: sybold;
color: #EBFAFF;
}
}
.backbtn {
position: absolute;
right: 26px;
bottom: 6px;
button {
width: 64px;
height: 32px;
background: rgba(0, 129, 255, 0.3);
border: 1px solid #36A2FF;
border-radius: 0px;
color: #91CCFF;
}
}
.warningnumber {
position: absolute;
left: 20px;
top: 0;
display: flex;
align-items: flex-start;
img {
margin-bottom: 30px;
}
.num {
font-size: 50px;
text-shadow: 0px 0px 6px #8df;
color: white;
font-weight: 600;
margin-top: -5px;
}
.today {
font-size: 19px;
font-family: titlefont;
color: #D0EAFF;
margin-top: 11px;
margin-left: 10px;
}
}
.content {

27
src/app/pages/home/home.component.ts
Unescape View File

@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser'
import { filter } from 'rxjs/operators';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
@ -7,9 +9,30 @@ import { Component, OnInit } from '@angular/core';
})
export class HomeComponent implements OnInit {
constructor() { }
constructor(private router: Router) { }
isGasStation: boolean
isWarning: boolean = false//是否是今日预警页面
ngOnInit(): void {
this.router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event: any) => {
if (event.url.indexOf('warning') != -1) {//控制今日预警左上角数字显示
this.isWarning = true
} else {
this.isWarning = false
}
if (event.url.indexOf('petrolStation') != -1 && sessionStorage.getItem('isGasStation') == 'false') {//控制返回按钮显示
this.isGasStation = true
}else{
this.isGasStation = false
}
});
}
goback(){
history.go(-1)
}
}

8
src/app/pages/login/login.component.ts
Unescape View File

@ -61,7 +61,13 @@ export class LoginComponent implements OnInit {
sessionStorage.setItem('userdata', JSON.stringify(data.result.user))
this.isLoading = false;
this.message.create('success', `登陆成功`);
this.router.navigate(['/plan'])
if(data.result.user.organization.isGasStation){
sessionStorage.setItem("isGasStation", 'true');
this.router.navigate(['/plan/petrolStation'])
}else{
sessionStorage.setItem("isGasStation", 'false');
this.router.navigate(['/plan'])
}
})
//调用服务中的function刷新token

5
src/app/pages/pages.module.ts
Unescape View File

@ -40,13 +40,14 @@ import { AddequipmentComponent } from './equipment-info/addequipment/addequipmen
import { EditequipmentComponent } from './equipment-info/editequipment/editequipment.component';
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
import { PlanAdminComponent } from './plan-admin/plan-admin.component';
import { GetOutOfLineDetailsComponent } from './today-warning/get-out-of-line-details/get-out-of-line-details.component';
@NgModule({
declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
AddequipmentComponent, EditequipmentComponent,PlanAdminComponent],
AddequipmentComponent, EditequipmentComponent,PlanAdminComponent, GetOutOfLineDetailsComponent],
imports: [
@ -80,7 +81,7 @@ import { PlanAdminComponent } from './plan-admin/plan-admin.component';
NzCollapseModule
],
entryComponents: [AddequipmentComponent, EditequipmentComponent],
entryComponents: [AddequipmentComponent, EditequipmentComponent,GetOutOfLineDetailsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

6
src/app/pages/plan-admin/plan-admin.component.scss
Unescape View File

@ -26,7 +26,8 @@
margin-top: 12px;
box-sizing: border-box;
padding: 18px 12px;
nz-tree{
nz-tree {
background: none;
color: #C4E2FC;
}
@ -107,6 +108,9 @@
div {
color: #91CCFF;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.look {
color: #36A2FF;

2
src/app/pages/today-warning-admin/today-warning-admin.component.html
Unescape View File

@ -146,7 +146,7 @@
</div>
<div nz-col nzSpan="2">
<button nz-button (click)="look()">查看</button>
<img style="margin-left: 24px;cursor: pointer;" src="../../../assets/images/excel.png" alt="">
<!-- <img style="margin-left: 24px;cursor: pointer;" src="../../../assets/images/excel.png" alt=""> -->
</div>
</div>
</div>

23
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
Unescape View File

@ -0,0 +1,23 @@
<!-- <p>get-out-of-line-details works!</p> -->
<div class="box">
<div class="titlebox">
<div class="title">
<div (click)="contentType('img')" [ngClass]="{'selected': selectedType == 'img'}">
违规截图
<div class="border"></div>
</div>
<div (click)="contentType('video')" [ngClass]="{'selected': selectedType == 'video'}">
违规视频
<div class="border"></div>
</div>
</div>
</div>
<div class="content">
<div *ngIf="selectedType == 'img'">
违规截图
</div>
<div *ngIf="selectedType == 'video'">
违规视频
</div>
</div>
</div>

61
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
Unescape View File

@ -0,0 +1,61 @@
.box {
width: 100%;
height: 700px;
color: #fff;
display: flex;
flex-direction: column;
}
.titlebox {
width: 100%;
height: 48px;
background: #041d3c;
display: flex;
align-items: center;
.title {
width: 100%;
height: 32px;
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.57) 50%, rgba(35, 153, 255, 0) 100%);
display: flex;
justify-content: center;
div {
width: 120px;
height: 32px;
text-align: center;
line-height: 32px;
font-family: sybold;
font-size: 16px;
position: relative;
cursor: pointer;
margin: 0 18px;
.border {
position: absolute;
bottom: -7px;
left: -18px;
width: 120px;
height: 4px;
}
}
.selected {
background: linear-gradient(90deg, #1662a9 0%, #25b7d4 50%, #1662a9 100%);
.border {
background: linear-gradient(90deg, rgba(35, 217, 255, 0) 0%, #25b7d4 50%, rgba(35, 217, 255, 0) 100%);
}
}
}
}
.ant-modal-close {
color: #fff;
}
.content {
flex: 1;
box-sizing: border-box;
padding: 18px;
}

20
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
Unescape View File

@ -0,0 +1,20 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-get-out-of-line-details',
templateUrl: './get-out-of-line-details.component.html',
styleUrls: ['./get-out-of-line-details.component.scss']
})
export class GetOutOfLineDetailsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
selectedType:string = 'img'
contentType(type){
this.selectedType = type
}
}

13
src/app/pages/today-warning/today-warning.component.html
Unescape View File

@ -54,10 +54,7 @@
</form>
</div>
<!-- <div class="warningnumber">
<span class="num">39</span>
<span class="today">今日违规</span>
</div> -->
<div class="listbox">
<div nz-row class="listitem" *ngFor="let item of list">
<div nz-col nzSpan="3">
@ -88,12 +85,8 @@
</div>
<div nz-col nzSpan="2">
<button nz-button (click)="showModal()">查看</button>
<nz-modal nzWidth="1100" nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisible"
(nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzFooter]="null">
</nz-modal>
<img style="margin-left: 24px;cursor: pointer;" src="../../../assets/images/excel.png" alt="">
<!-- <img style="margin-left: 24px;cursor: pointer;" src="../../../assets/images/excel.png" alt=""> -->
</div>
</div>
</div>
</div>
</div>

19
src/app/pages/today-warning/today-warning.component.scss
Unescape View File

@ -46,24 +46,7 @@
}
}
.warningnumber {
position: absolute;
left: 23px;
top: -60px;
.num {
font-size: 50px;
text-shadow: 0px 0px 6px #8df;
color: white;
font-weight: 600;
}
.today {
font-size: 18px;
font-family: titlefont;
color: #D0EAFF;
}
}
.listbox {
flex: 1;

74
src/app/pages/today-warning/today-warning.component.ts
Unescape View File

@ -1,7 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { TreeService } from 'src/app/service/tree.service';
import { NzModalService } from 'ng-zorro-antd/modal';
import { GetOutOfLineDetailsComponent } from './get-out-of-line-details/get-out-of-line-details.component';
@Component({
selector: 'app-today-warning',
templateUrl: './today-warning.component.html',
@ -9,7 +11,7 @@ import { TreeService } from 'src/app/service/tree.service';
})
export class TodayWarningComponent implements OnInit {
validateForm!: FormGroup;
constructor(private http: HttpClient,private fb: FormBuilder, private toTree: TreeService) { }
constructor(private http: HttpClient, private fb: FormBuilder, private toTree: TreeService, private modal: NzModalService, private viewContainerRef: ViewContainerRef) { }
ngOnInit(): void {
this.validateForm = this.fb.group({
@ -23,14 +25,14 @@ export class TodayWarningComponent implements OnInit {
}
//预警类型接口
yujingTypes:any //预警接口数据
yujingType(){
yujingTypes: any //预警接口数据
yujingType() {
this.http.get('/api/services/app/Violation/GetAllList').subscribe((data: any) => {
this.yujingTypes=data.result
}
this.yujingTypes = data.result
}
)
}
submitForm(): void {
for (const i in this.validateForm.controls) {
@ -50,30 +52,44 @@ export class TodayWarningComponent implements OnInit {
}
list: any = [
{level:1,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:2,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:3,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:1,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:1,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:1,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:1,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:1,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:1,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:1,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:1,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
{level:1,type:'加油区违规',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}
{ level: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 2, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 3, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' },
{ level: 1, type: '加油区违规', content: '工作人员倚靠加油机或者立柱', site: '加油区2号摄像头', time: '2021-10-12 09:28:13' }
]
isVisible = false;
showModal(): void {
this.isVisible = true;
}
handleOk(): void {
console.log('Button ok clicked!');
this.isVisible = false;
}
handleCancel(): void {
console.log('Button cancel clicked!');
this.isVisible = false;
const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent,
nzViewContainerRef: this.viewContainerRef,
nzWidth: 1200,
nzBodyStyle: {
'border': '1px solid #6d9cc7',
'border-radius': '0px',
'padding': '0px',
'box-shadow': '0 0 8px 0 #fff',
'background': '#000D21',
},
nzComponentParams: {},
nzFooter: null,
nzOnOk: async () => {
}
});
const instance = modal.getContentComponent();
}
}

1
src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.html
Unescape View File

@ -0,0 +1 @@
<p>analysis-of-the-host works!</p>

0
src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.scss
Unescape View File

25
src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.spec.ts
Unescape View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AnalysisOfTheHostComponent } from './analysis-of-the-host.component';
describe('AnalysisOfTheHostComponent', () => {
let component: AnalysisOfTheHostComponent;
let fixture: ComponentFixture<AnalysisOfTheHostComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AnalysisOfTheHostComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AnalysisOfTheHostComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/system-management/analysis-of-the-host/analysis-of-the-host.component.ts
Unescape View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-analysis-of-the-host',
templateUrl: './analysis-of-the-host.component.html',
styleUrls: ['./analysis-of-the-host.component.scss']
})
export class AnalysisOfTheHostComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

1
src/app/system-management/navigation/navigation.component.html
Unescape View File

@ -16,6 +16,7 @@
<li [routerLink]="['/system/organization']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/organization.png" alt="">组织机构管理</li>
<li [routerLink]="['/system/user']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/user.png" alt="">用户管理</li>
<li [routerLink]="['/system/role']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/role.png" alt="">角色管理</li>
<li [routerLink]="['/system/host']" routerLinkActive="router-link-active"><img src="../../../assets/images/icon/role.png" alt="">分析主机管理</li>
</ul>
</div>
</nz-sider>

4
src/app/system-management/navigation/navigation.component.ts
Unescape View File

@ -13,8 +13,6 @@ export class NavigationComponent implements OnInit {
ngOnInit(): void {
}
signOut() {
// history.go(-1);
// /home/warning/admin
this.router.navigate(['/home/warning/admin'])
this.router.navigate(['/plan'])
}
}

4
src/app/system-management/system-management-routing.module.ts
Unescape View File

@ -5,11 +5,13 @@ import { AuthGuard } from '../auth.guard'
import { RoleComponent } from './role/role.component';
import { OrganizationComponent } from './organization/organization.component';
import { UserComponent } from './user/user.component';
import { AnalysisOfTheHostComponent } from './analysis-of-the-host/analysis-of-the-host.component';
const routes: Routes = [
{ path: 'organization', component: OrganizationComponent },
{ path: 'user', component: UserComponent },
{ path: 'role', component: RoleComponent }
{ path: 'role', component: RoleComponent },
{ path: 'host', component: AnalysisOfTheHostComponent }
];
@NgModule({

3
src/app/system-management/system-management.module.ts
Unescape View File

@ -27,8 +27,9 @@ import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
import { AddorComponent } from './organization/addor/addor.component';
import { EditorComponent } from './organization/editor/editor.component';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { AnalysisOfTheHostComponent } from './analysis-of-the-host/analysis-of-the-host.component';
@NgModule({
declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent, AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent],
declarations: [OrganizationComponent, UserComponent, RoleComponent, NavigationComponent, AdduserComponent, EdituserComponent, AddroleComponent, EditroleComponent, AddorComponent, EditorComponent, AnalysisOfTheHostComponent],
imports: [
CommonModule,
SystemRoutingModule,

BIN
src/assets/images/warningnum.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

15
src/theme.less
Unescape View File

@ -274,5 +274,20 @@
}
.ant-tree .ant-tree-node-content-wrapper{
padding: 2px 20px;
// margin-left: 30px;
}
nz-tree{
nz-tree-node{
margin-left: 20px;
}
nz-tree-node:nth-child(1){
margin-left: 0px;
}
}
}
.ant-modal-close-x{
color: #fff;
}
Write Preview
Loading…
Cancel
Save