刘向辉 3 years ago
parent
commit
d76dfd4baa
  1. 4
      src/app/app-routing.module.ts
  2. 20
      src/app/app.component.html
  3. 11
      src/app/app.component.ts
  4. 14
      src/app/auth.guard.ts
  5. 2
      src/app/babylon/view/mark-window/mark-window.ts
  6. 111
      src/app/pages/criminal-records-admin/criminal-records-admin.component.html
  7. 36
      src/app/pages/criminal-records-admin/criminal-records-admin.component.scss
  8. 164
      src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
  9. 111
      src/app/pages/criminal-records/criminal-records.component.html
  10. 33
      src/app/pages/criminal-records/criminal-records.component.scss
  11. 163
      src/app/pages/criminal-records/criminal-records.component.ts
  12. 38
      src/app/pages/home/home.component.html
  13. 41
      src/app/pages/home/home.component.scss
  14. 120
      src/app/pages/home/home.component.ts
  15. 2
      src/app/pages/left-domain/left-domain.component.html
  16. 58
      src/app/pages/left-domain/left-domain.component.ts
  17. 27
      src/app/pages/login/login.component.html
  18. 21
      src/app/pages/login/login.component.scss
  19. 69
      src/app/pages/login/login.component.ts
  20. 15
      src/app/pages/pages.module.ts
  21. 2
      src/app/pages/plan-admin/plan-admin.component.html
  22. 46
      src/app/pages/plan-admin/plan-admin.component.ts
  23. 52
      src/app/pages/plan/plan.component.html
  24. 8
      src/app/pages/plan/plan.component.scss
  25. 213
      src/app/pages/plan/plan.component.ts
  26. 5
      src/app/pages/today-warning-admin/today-warning-admin.component.html
  27. 51
      src/app/pages/today-warning-admin/today-warning-admin.component.scss
  28. 127
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
  29. 146
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
  30. 1
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
  31. 5
      src/app/pages/today-warning/today-warning.component.html
  32. 26
      src/app/pages/today-warning/today-warning.component.scss
  33. 3
      src/app/system-management/navigation/navigation.component.html
  34. 3
      src/app/system-management/navigation/navigation.component.ts
  35. 9
      src/app/system-management/push/push.component.ts
  36. 8
      src/app/ui/tabbar/tabbar.component.html
  37. 13
      src/app/ui/tabbar/tabbar.component.ts
  38. BIN
      src/assets/images/down.png
  39. BIN
      src/assets/images/fullscreen.png
  40. BIN
      src/assets/images/logo2.png
  41. BIN
      src/assets/images/navbg.png
  42. BIN
      src/assets/images/right3.png
  43. 896
      src/assets/js/abp.js
  44. 135
      src/assets/js/abp.signalr-client.js
  45. 3741
      src/assets/js/signalr.js
  46. 7
      src/index.html
  47. 10
      src/styles.scss

4
src/app/app-routing.module.ts

@ -15,12 +15,12 @@ const routes: Routes = [
{ path: 'login', component: LoginComponent }, //登录页 { path: 'login', component: LoginComponent }, //登录页
{ path: 'register', component: RegisterComponent }, //注册页 { path: 'register', component: RegisterComponent }, //注册页
{ {
path: '', component: HomeComponent, children: [ path: '', component: HomeComponent, canActivate: [AuthGuard], children: [
{ path: '', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) } { path: '', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) }
] ]
}, //首页 }, //首页
{ {
path: '', component: NavigationComponent, children: [ path: '', component: NavigationComponent, canActivate: [AuthGuard], children: [
{ path: 'system', loadChildren: () => import('./system-management/system-management.module').then(m => m.SystemManagementModule) } { path: 'system', loadChildren: () => import('./system-management/system-management.module').then(m => m.SystemManagementModule) }
] ]
}//系统管理 }//系统管理

20
src/app/app.component.html

@ -1,19 +1 @@
<router-outlet></router-outlet> <router-outlet></router-outlet>
<!-- <button class="btn" (click)="receiptOfNotification()">点击收到通知 </button> -->
<ng-template>
<div class="topbox">
<div>
<img src="../assets/images/AnXinQQ.jpg" alt="">
</div>
<div class="text">
<span>您有一条新的预警提醒!</span>
<span>这是详细描述这是详细描述这是详细描述...</span>
</div>
</div>
<div class="btnbox">
<button class="look" nz-button type="button">查看</button>
<button class="lose" nz-button type="button">忽略</button>
</div>
</ng-template>

11
src/app/app.component.ts

@ -1,13 +1,10 @@
import { Component, TemplateRef, ViewChild } from '@angular/core'; import { Component, TemplateRef, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http' import { HttpClient } from '@angular/common/http'
import { Data } from './interface'
import { Router, ActivatedRoute } from '@angular/router' import { Router, ActivatedRoute } from '@angular/router'
import { CacheTokenService } from './service/cache-token.service'//引入服务 import { CacheTokenService } from './service/cache-token.service'//引入服务
import { CookieService } from 'ngx-cookie-service'; import { CookieService } from 'ngx-cookie-service';
import "reflect-metadata"; import "reflect-metadata";
import { NzNotificationService } from 'ng-zorro-antd/notification'; import { NzNotificationService } from 'ng-zorro-antd/notification';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
@ -17,7 +14,7 @@ export class AppComponent {
@ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{}>; @ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{}>;
constructor(private http: HttpClient, private router: Router, public token: CacheTokenService, private cookieService: CookieService,private notificationService: NzNotificationService) { } constructor(private http: HttpClient, private router: Router, public token: CacheTokenService, private cookieService: CookieService, private notificationService: NzNotificationService) { }
ngOnInit(): void { ngOnInit(): void {
// var token = this.cookieService.get("token") // var token = this.cookieService.get("token")
@ -30,11 +27,7 @@ export class AppComponent {
// this.token.startUp() // this.token.startUp()
// }) // })
// } // }
} }
receiptOfNotification() {
this.notificationService.template(this.template!, { nzPlacement: 'bottomRight', nzClass: 'receiptOfNotification',nzDuration: 0 });
}
} }

14
src/app/auth.guard.ts

@ -14,17 +14,17 @@ export class AuthGuard implements CanActivate {
// 路由守卫 // 路由守卫
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
console.log('路由守卫',next.data) // console.log('路由守卫',next.data)
if(next.data.permission == 'xxxx'){ // if(next.data.permission == 'xxxx'){
return true; // return true;
} // }
// return this.checkLogin(); return this.checkLogin();
} }
checkLogin(): boolean { checkLogin(): boolean {
console.log('xxxxxxxxxxxx')
// 判断本地有没有token // 判断本地有没有token
const token = this.cookieService.get("token"); const token = this.cookieService.get("token") || sessionStorage.getItem('token');
// 如果有token,允许访问 // 如果有token,允许访问
if (token) { return true; } if (token) { return true; }

2
src/app/babylon/view/mark-window/mark-window.ts

@ -524,7 +524,7 @@ export class MarkWindow extends UIBase {
*/ */
openProperty(markInfo: ModelInfo_mark) { openProperty(markInfo: ModelInfo_mark) {
if (markInfo != null) { if (markInfo != null) {
//ThreeDimensionalHomeComponent.instance.getSandTableNature(markInfo.markData); PlanComponent.instance.getSandTableNature(markInfo.markData);
} }
} }

111
src/app/pages/criminal-records-admin/criminal-records-admin.component.html

@ -1,64 +1,65 @@
<div class="recordsboxadmin" id="recordsboxadmin"> <div class="recordsboxadmin" id="recordsboxadmin">
<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-option nzValue="4" nzLabel="四级"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select id="type" (ngModelChange)="typeChange($event)" formControlName="type" nzPlaceHolder="请选择预警类型">
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></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="出入口" nzLabel="出入口"></nz-option>
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
<nz-option nzValue="其他区域" 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="content">
<div class="title"> <div class="title">
<app-title [name]="'预警类型统计'"></app-title> <app-title [name]="'预警类型统计'"></app-title>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt=""> <img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</div> </div>
<div class="search" [hidden]="!isEcharts">
<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-option nzValue="4" nzLabel="四级"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select id="type" (ngModelChange)="typeChange($event)" formControlName="type" nzPlaceHolder="请选择预警类型">
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></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="出入口" nzLabel="出入口"></nz-option>
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
<nz-option nzValue="其他区域" 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="chartsbox" [hidden]="!isEcharts"> <div class="chartsbox" [hidden]="!isEcharts">
<div class="chart"> <div class="chart">
<div class="leftbox"> <div class="leftbox">
@ -68,7 +69,7 @@
</span> </span>
<div class="centerContent"> <div class="centerContent">
<div class="numname">预警事件总数</div> <div class="numname">预警事件总数</div>
<div class="num">206</div> <div class="num">{{num}}</div>
</div> </div>
<div class="piechart" id="piechart"> <div class="piechart" id="piechart">

36
src/app/pages/criminal-records-admin/criminal-records-admin.component.scss

@ -10,7 +10,7 @@
padding: 0 36px; padding: 0 36px;
width: 100%; width: 100%;
height: 32px; height: 32px;
margin-top: 14px; margin-bottom: 16px;
form { form {
width: 100%; width: 100%;
@ -65,20 +65,21 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
.chartname{
position: absolute;
left: 20px;
top: 12px;
}
.chart { .chart {
width: 97%; width: 97%;
height: 360px; height: 350px;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
box-sizing: border-box; box-sizing: border-box;
padding: 18px 26px; padding: 0 10px;
display: flex; display: flex;
div { div {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
span { span {
font-family: titlefont; font-family: titlefont;
display: flex; display: flex;
@ -91,22 +92,18 @@
div { div {
flex: 1; flex: 1;
} }
.piechart {}
.barchart {
// border: 1px solid rgba(145, 204, 255, 0.95);
}
} }
.leftbox { .leftbox {
width: 360px; width: 360px;
position: relative; position: relative;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
margin-right: 16px;
.centerContent { .centerContent {
position: absolute; position: absolute;
top: 42%; top: 42%;
left: 11%; left: 26%;
width: 170px; width: 170px;
div { div {
@ -132,11 +129,12 @@
.rightbox { .rightbox {
flex: 1; flex: 1;
position: relative; position: relative;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
.btnbox { .btnbox {
position: absolute; position: absolute;
right: 5px; right: 28px;
top: 5px; top: 12px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
z-index: 999; z-index: 999;

164
src/app/pages/criminal-records-admin/criminal-records-admin.component.ts

@ -30,8 +30,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
{ {
// name: 'Access From', // name: 'Access From',
type: 'pie', type: 'pie',
radius: [85, 112],//内半径外,外半径 radius: [88, 116],//内半径外,外半径
left: '-30%', left: '0',
top:'8%',
avoidLabelOverlap: false,//防止标签重叠策略 avoidLabelOverlap: false,//防止标签重叠策略
label: {//每一个标签外网延伸的引导说明 label: {//每一个标签外网延伸的引导说明
show: false, show: false,
@ -49,26 +50,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
} }
}, },
data: [ 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: {//鼠标移入提示 tooltip: {//鼠标移入提示
position: 'right', position: 'right',
@ -87,7 +69,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
baroption = { baroption = {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.getThirtyDays(), data: [],
axisLine: { axisLine: {
show: false, show: false,
lineStyle: { lineStyle: {
@ -96,7 +78,8 @@ export class CriminalRecordsAdminComponent implements OnInit {
}, },
axisTick: {//刻度线 axisTick: {//刻度线
show: false show: false
} },
inverse: true
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -121,7 +104,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
}, },
series: [ series: [
{ {
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], data: [],
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
color: { color: {
@ -141,7 +124,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
barWidth: '25%' barWidth: '25%'
}, },
{ {
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], data: [],
type: 'line', type: 'line',
symbol: 'circle', symbol: 'circle',
symbolSize: 8, symbolSize: 8,
@ -160,10 +143,10 @@ export class CriminalRecordsAdminComponent implements OnInit {
} }
], ],
grid: { grid: {
left: '36px', left: '42px',
right: '30px', right: '30px',
bottom: '50px', bottom: '38px',
top: '45px' top: '60px'
} }
}; };
baroption2 = { baroption2 = {
@ -173,7 +156,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: ['北京市第十九加油站1', '北京市第十九加油站2', '北京市第十九加油站3', '北京市第十九加油站4', '北京市第十九加油站5', '北京市第十九加油站6', '北京市第十九加油站7', '北京市第十九加油站8', '北京市第十九加油站9', '北京市第十九加油站10', '北京市第十九加油站11', '北京市第十九加油站12', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站', '北京市第十九加油站20', '北京市第十九加油站21', '北京市第十九加油站22', '北京市第十九加油站23'], data: [],
axisLine: { axisLine: {
show: false, show: false,
lineStyle: { lineStyle: {
@ -185,8 +168,27 @@ export class CriminalRecordsAdminComponent implements OnInit {
}, },
axisLabel: { axisLabel: {
formatter: function (value, index) { formatter: function (value, index) {
let newParamsName = '';
const paramsNameNumber = value.length;
const provideNumber = 10;
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = '';
const start = p * provideNumber;
const end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = value.substring(start, paramsNameNumber);
} else {
tempStr = value.substring(start, end) + '\n';
}
newParamsName += tempStr;
}
} else {
newParamsName = value;
}
// 格式化成月/日,只在第一个刻度显示年份 // 格式化成月/日,只在第一个刻度显示年份
return '{s|·}' + `{a|${value}}`; return '{s|·}' + `{a|${newParamsName}}`;
}, },
rich: { rich: {
a: { a: {
@ -219,7 +221,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
formatter: '{c}', formatter: '{c}',
offset: [6, 0] offset: [6, 0]
}, },
data: [40, 36, 30, 25, 19, 15, 14, 11, 10, 8, 40, 36, 30, 25, 19, 15, 14, 11, 10, 8, 1, 2, 3].reverse(), data: [],
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
color: { color: {
@ -244,7 +246,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
left: '150px', left: '150px',
right: '80px', right: '80px',
bottom: '3px', bottom: '3px',
top: '20px' top: '36px'
}, },
// dataZoom: [ //Y轴滑动条 // dataZoom: [ //Y轴滑动条
// { // {
@ -278,7 +280,6 @@ export class CriminalRecordsAdminComponent implements OnInit {
startdate startdate
enddate enddate
ngOnInit(): void { ngOnInit(): void {
//当前日期 //当前日期
let myDate: any = new Date(); let myDate: any = new Date();
let nowY = myDate.getFullYear(); let nowY = myDate.getFullYear();
@ -309,7 +310,85 @@ export class CriminalRecordsAdminComponent implements OnInit {
this.warningType() this.warningType()
this.getViolateRecordList() this.getViolateRecordList()
} }
//刷新饼图图表数据
num
echartsData: any
refreshPieData(data) {
//饼图
let option = this.myChart.getOption();
var num = 0
data.pieTop.forEach(element => {
num += element.count
element.name = element.key
element.value = element.count
});
this.num = num
option.series[0].data = data.pieTop;
this.myChart.setOption(option);
}
//刷新柱状折线图表数据
refreshBarLineData(data, type) {
console.log('统计图表数据', data)
//柱状图
let option = this.mybarChart.getOption();
console.log('柱图option', option)
if (type == 'month') {//近一个月柱状折线图
option = this.baroption
let monthArr = []
let valuedata = []
data.timeTop.forEach(element => {
monthArr.push(moment(element.key).format('MM.DD'))
valuedata.push(element.count)
});
option.xAxis.data = monthArr
option.series[0].data = valuedata
option.series[1].data = valuedata
} else if (type == 'eventTop') {
option = this.baroption2
let ydata = []
let valuedata = []
data.eventTop.forEach(element => {
ydata.push(element.key)
valuedata.push(element.count)
});
option.yAxis.data = ydata
option.series.data = valuedata
} else if (type == 'siteTop') {
option = this.baroption2
let ydata = []
let valuedata = []
data.siteTop.forEach(element => {
ydata.push(element.key)
valuedata.push(element.count)
});
option.yAxis.data = ydata
option.series.data = valuedata
}
this.mybarChart.setOption(option);
}
//获取统计信息
getAggregations() {
let ViolationIds = []
if (this.validateForm.value.type) {
this.warningTypesDetails.forEach(item => {
item.id ? ViolationIds.push(item.id) : null
});
}
let body: any = {
organizationUnitId: JSON.parse(sessionStorage.getItem('userdata')).organization.id,
isContainsChildren: true,
ViolateTime: this.validateForm.value.datePicker ? [moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD'), moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD')] : null
}
this.validateForm.value.level ? body.level = this.validateForm.value.level : null
this.validateForm.value.site ? body.violateArea = this.validateForm.value.site : null
ViolationIds.length != 0 ? body.violationType = ViolationIds : null
this.http.post('/api/services/app/ViolateRecord/Aggregations', body).subscribe((data: any) => {
this.echartsData = data.result
this.refreshPieData(data.result)
this.refreshBarLineData(this.echartsData, 'month')
})
}
//获得违规记录列表 //获得违规记录列表
SkipCount: string = '0' SkipCount: string = '0'
MaxResultCount: string = '50' MaxResultCount: string = '50'
@ -340,6 +419,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
// this.list = data.result.items // this.list = data.result.items
this.totalCount = data.result.totalCount this.totalCount = data.result.totalCount
console.log('违规记录列表', data) console.log('违规记录列表', data)
this.getAggregations()
}) })
} }
@ -466,13 +546,25 @@ export class CriminalRecordsAdminComponent implements OnInit {
this.mybarChart.dispose() this.mybarChart.dispose()
this.mybarChart = echarts.init(document.getElementById('barchart')); this.mybarChart = echarts.init(document.getElementById('barchart'));
if (type == '排名') { if (type == '排名') {
this.mybarChart.setOption(this.baroption2); console.log(this.selectedRankingType)
if (this.selectedRankingType == '站点排名') {
this.refreshBarLineData(this.echartsData, 'siteTop')
}
if (this.selectedRankingType == '事件排名') {
this.refreshBarLineData(this.echartsData, 'eventTop')
}
} else { } else {
this.mybarChart.setOption(this.baroption); this.refreshBarLineData(this.echartsData, 'month')
} }
} }
echartClick2(type) { echartClick2(type) {
this.selectedRankingType = type this.selectedRankingType = type
if (this.selectedRankingType == '站点排名') {
this.refreshBarLineData(this.echartsData, 'siteTop')
}
if (this.selectedRankingType == '事件排名') {
this.refreshBarLineData(this.echartsData, 'eventTop')
}
} }
} }

111
src/app/pages/criminal-records/criminal-records.component.html

@ -1,64 +1,65 @@
<div class="recordsbox" id="recordsbox"> <div class="recordsbox" id="recordsbox">
<div class="search">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select 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-option nzValue="4" nzLabel="四级"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select formControlName="type" (ngModelChange)="typeChange($event)" nzPlaceHolder="请选择预警类型">
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select formControlName="site" nzPlaceHolder="请选择站内发生区域">
<nz-option nzValue="出入口" nzLabel="出入口"></nz-option>
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
<nz-option nzValue="其他区域" 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="content">
<div class="title"> <div class="title">
<app-title [name]="'预警类型统计'"></app-title> <app-title [name]="'预警类型统计'"></app-title>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt=""> <img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</div> </div>
<div class="search" [hidden]="!isEcharts">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select 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-option nzValue="4" nzLabel="四级"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select formControlName="type" (ngModelChange)="typeChange($event)" nzPlaceHolder="请选择预警类型">
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select formControlName="site" nzPlaceHolder="请选择站内发生区域">
<nz-option nzValue="出入口" nzLabel="出入口"></nz-option>
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
<nz-option nzValue="其他区域" 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="chartsbox" [hidden]="!isEcharts"> <div class="chartsbox" [hidden]="!isEcharts">
<div class="chart"> <div class="chart">
<div class="leftbox"> <div class="leftbox">
@ -68,7 +69,7 @@
</span> </span>
<div class="centerContent"> <div class="centerContent">
<div class="numname">预警事件总数</div> <div class="numname">预警事件总数</div>
<div class="num">206</div> <div class="num">{{num}}</div>
</div> </div>
<div class="piechart" id="piechart"> <div class="piechart" id="piechart">

33
src/app/pages/criminal-records/criminal-records.component.scss

@ -10,7 +10,7 @@
padding: 0 36px; padding: 0 36px;
width: 100%; width: 100%;
height: 32px; height: 32px;
margin-top: 14px; margin-bottom: 16px;
form { form {
width: 100%; width: 100%;
@ -66,14 +66,16 @@
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
.chartname{
position: absolute;
left: 20px;
top: 12px;
}
.chart { .chart {
width: 97%; width: 97%;
height: 360px; height: 350px;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
box-sizing: border-box; box-sizing: border-box;
padding: 18px 26px; padding: 0 10px;
display: flex; display: flex;
div { div {
@ -92,22 +94,18 @@
div { div {
flex: 1; flex: 1;
} }
.piechart {}
.barchart {
// border: 1px solid rgba(145, 204, 255, 0.95);
}
} }
.leftbox { .leftbox {
width: 360px; width: 360px;
position: relative; position: relative;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
margin-right: 16px;
.centerContent { .centerContent {
position: absolute; position: absolute;
top: 42%; top: 42%;
left: 11%; left: 26%;
width: 170px; width: 170px;
div { div {
@ -133,11 +131,12 @@
.rightbox { .rightbox {
flex: 1; flex: 1;
position: relative; position: relative;
border: 0px;
box-shadow: 0 0 26px 0px #1a7fd7 inset;
.btnbox { .btnbox {
position: absolute; position: absolute;
right: 5px; right: 28px;
top: 5px; top: 12px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
z-index: 999; z-index: 999;

163
src/app/pages/criminal-records/criminal-records.component.ts

@ -26,8 +26,9 @@ export class CriminalRecordsComponent implements OnInit {
{ {
// name: 'Access From', // name: 'Access From',
type: 'pie', type: 'pie',
radius: [85, 112],//内半径外,外半径 radius: [88, 116],//内半径外,外半径
left: '-30%', left: '0',
top:'8%',
avoidLabelOverlap: false,//防止标签重叠策略 avoidLabelOverlap: false,//防止标签重叠策略
label: {//每一个标签外网延伸的引导说明 label: {//每一个标签外网延伸的引导说明
show: false, show: false,
@ -45,26 +46,6 @@ export class CriminalRecordsComponent implements OnInit {
} }
}, },
data: [ 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: {//鼠标移入提示 tooltip: {//鼠标移入提示
position: 'right', position: 'right',
@ -84,7 +65,7 @@ export class CriminalRecordsComponent implements OnInit {
baroption = { baroption = {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: this.getThirtyDays(), data: [],
axisLine: { axisLine: {
show: false, show: false,
lineStyle: { lineStyle: {
@ -93,7 +74,9 @@ export class CriminalRecordsComponent implements OnInit {
}, },
axisTick: {//刻度线 axisTick: {//刻度线
show: false show: false
} },
inverse: true
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
@ -118,7 +101,7 @@ export class CriminalRecordsComponent implements OnInit {
}, },
series: [ series: [
{ {
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], data: [],
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
color: { color: {
@ -138,7 +121,7 @@ export class CriminalRecordsComponent implements OnInit {
barWidth: '25%' barWidth: '25%'
}, },
{ {
data: [120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130, 100, 101], data: [],
type: 'line', type: 'line',
symbol: 'circle', symbol: 'circle',
symbolSize: 8, symbolSize: 8,
@ -157,10 +140,10 @@ export class CriminalRecordsComponent implements OnInit {
} }
], ],
grid: { grid: {
left: '36px', left: '42px',
right: '30px', right: '30px',
bottom: '50px', bottom: '38px',
top: '45px' top: '60px'
} }
}; };
baroption2 = { baroption2 = {
@ -170,7 +153,7 @@ export class CriminalRecordsComponent implements OnInit {
}, },
yAxis: { yAxis: {
type: 'category', type: 'category',
data: ['预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名', '预警事件名'], data: [],
axisLine: { axisLine: {
show: false, show: false,
lineStyle: { lineStyle: {
@ -182,8 +165,27 @@ export class CriminalRecordsComponent implements OnInit {
}, },
axisLabel: { axisLabel: {
formatter: function (value, index) { formatter: function (value, index) {
let newParamsName = '';
const paramsNameNumber = value.length;
const provideNumber = 10;
const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
if (paramsNameNumber > provideNumber) {
for (let p = 0; p < rowNumber; p++) {
let tempStr = '';
const start = p * provideNumber;
const end = start + provideNumber;
if (p == rowNumber - 1) {
tempStr = value.substring(start, paramsNameNumber);
} else {
tempStr = value.substring(start, end) + '\n';
}
newParamsName += tempStr;
}
} else {
newParamsName = value;
}
// 格式化成月/日,只在第一个刻度显示年份 // 格式化成月/日,只在第一个刻度显示年份
return '{s|·}' + `{a|${value}}`; return '{s|·}' + `{a|${newParamsName}}`;
}, },
rich: { rich: {
a: { a: {
@ -201,8 +203,8 @@ export class CriminalRecordsComponent implements OnInit {
shadowColor: "#fff" shadowColor: "#fff"
} }
} }
} },
inverse: true
}, },
series: series:
{ {
@ -215,7 +217,7 @@ export class CriminalRecordsComponent implements OnInit {
formatter: '{c}', formatter: '{c}',
offset: [6, 0] offset: [6, 0]
}, },
data: [40, 36, 30, 25, 19, 15, 14, 11, 10, 8].reverse(), data: [],
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
color: { color: {
@ -237,10 +239,10 @@ export class CriminalRecordsComponent implements OnInit {
} }
, ,
grid: { grid: {
left: '100px', left: '150px',
right: '60px', right: '80px',
bottom: '3px', bottom: '3px',
top: '20px' top: '36px'
} }
} }
getThirtyDays() { getThirtyDays() {
@ -312,6 +314,87 @@ export class CriminalRecordsComponent implements OnInit {
this.warningType() this.warningType()
this.getViolateRecordList() this.getViolateRecordList()
}
//刷新饼图图表数据
num
echartsData: any
refreshPieData(data) {
//饼图
let option = this.myChart.getOption();
var num = 0
data.pieTop.forEach(element => {
num += element.count
element.name = element.key
element.value = element.count
});
this.num = num
option.series[0].data = data.pieTop;
this.myChart.setOption(option);
}
//刷新柱状折线图表数据
refreshBarLineData(data, type) {
console.log('统计图表数据', data)
//柱状图
let option = this.mybarChart.getOption();
console.log('柱图option', option)
if (type == 'month') {//近一个月柱状折线图
option = this.baroption
let monthArr = []
let valuedata = []
data.timeTop.forEach(element => {
monthArr.push(moment(element.key).format('MM.DD'))
valuedata.push(element.count)
});
option.xAxis.data = monthArr
option.series[0].data = valuedata
option.series[1].data = valuedata
} else if (type == 'eventTop') {
option = this.baroption2
let ydata = []
let valuedata = []
data.eventTop.forEach(element => {
ydata.push(element.key)
valuedata.push(element.count)
});
option.yAxis.data = ydata
option.series.data = valuedata
} else if (type == 'siteTop') {
option = this.baroption2
let ydata = []
let valuedata = []
data.siteTop.forEach(element => {
ydata.push(element.key)
valuedata.push(element.count)
});
option.yAxis.data = ydata
option.series.data = valuedata
}
this.mybarChart.setOption(option);
}
//获取统计信息
getAggregations() {
let ViolationIds = []
if (this.validateForm.value.type) {
this.warningTypesDetails.forEach(item => {
item.id ? ViolationIds.push(item.id) : null
});
}
let body: any = {
organizationUnitId: JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id,
isContainsChildren: true,
ViolateTime: this.validateForm.value.datePicker ? [moment(this.validateForm.value.datePicker[0]).format('yyyy-MM-DD'), moment(this.validateForm.value.datePicker[1]).format('yyyy-MM-DD')] : null
}
this.validateForm.value.level ? body.level = this.validateForm.value.level : null
this.validateForm.value.site ? body.violateArea = this.validateForm.value.site : null
ViolationIds.length != 0 ? body.violationType = ViolationIds : null
this.http.post('/api/services/app/ViolateRecord/Aggregations', body).subscribe((data: any) => {
this.echartsData = data.result
this.refreshPieData(data.result)
this.refreshBarLineData(this.echartsData, 'month')
})
} }
//获得违规记录列表 //获得违规记录列表
@ -344,6 +427,7 @@ export class CriminalRecordsComponent implements OnInit {
// this.list = data.result.items // this.list = data.result.items
this.totalCount = data.result.totalCount this.totalCount = data.result.totalCount
console.log('违规记录列表', data) console.log('违规记录列表', data)
this.getAggregations()
}) })
} }
ngAfterViewInit(): void { ngAfterViewInit(): void {
@ -405,9 +489,10 @@ export class CriminalRecordsComponent implements OnInit {
this.mybarChart.dispose() this.mybarChart.dispose()
this.mybarChart = echarts.init(document.getElementById('barchart')); this.mybarChart = echarts.init(document.getElementById('barchart'));
if (type == '排名') { if (type == '排名') {
this.mybarChart.setOption(this.baroption2); console.log(this.selectedRankingType)
this.refreshBarLineData(this.echartsData, 'eventTop')
} else { } else {
this.mybarChart.setOption(this.baroption); this.refreshBarLineData(this.echartsData, 'month')
} }
} }

38
src/app/pages/home/home.component.html

@ -1,8 +1,11 @@
<div class="box"> <div class="box">
<div> <!-- <div>
<app-tabbar></app-tabbar> <app-tabbar></app-tabbar>
</div> </div> -->
<div class="menu"> <div class="menu">
<div class="boxleft">
<img src="../../../assets/images/logo2.png" alt="">
</div>
<li *ngIf="!isGasStationNav" [routerLink]="['/plan']" routerLinkActive="router-link-active"> <li *ngIf="!isGasStationNav" [routerLink]="['/plan']" routerLinkActive="router-link-active">
数字油站 数字油站
</li> </li>
@ -22,14 +25,41 @@
<li *ngIf="isGasStationNav" [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active"> <li *ngIf="isGasStationNav" [routerLink]="['/records/petrolStation']" routerLinkActive="router-link-active">
预警记录 预警记录
</li> </li>
<!-- 登录信息按钮 -->
<div class="boxright">
<img *ngIf="!isfullscreen" (click)="fullscreenToggle()" style="margin-right: 8px;cursor: pointer;"
src="../../../assets/images/fullscreen.png" alt="" title="全屏">
<img *ngIf="isfullscreen" (click)="closefullscreen()" style="margin-right: 8px;cursor: pointer;"
src="../../../assets/images/fullscreen.png" alt="" title="全屏">
<span class="time">
{{time}}
</span>
<span style="margin: 0 18px;">|</span>
<span style="margin-right: 8px;"> {{surname}} </span>
<a nz-dropdown [nzDropdownMenu]="menu" [nzTrigger]="'click'" [nzBackdrop]='false'>
<img src="../../../assets/images/head.png" alt="">
</a>
<nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu nzSelectable>
<li *ngIf="isGasStation" nz-menu-item (click)="navChange('/oliStationInfo')">基本信息</li>
<li *ngIf="isGasStation" nz-menu-item (click)="navChange('/equipmentInfo')">器材信息</li>
<li *ngIf="userName == 'admin'" nz-menu-item (click)="navChange('/system/organization')">系统管理</li>
<li nz-menu-item (click)="signOut()">退出系统</li>
</ul>
</nz-dropdown-menu>
</div>
<div class="backbtn" *ngIf="isGasStation"> <div class="backbtn" *ngIf="isGasStation">
<button nz-button (click)="goback()">返回</button> <button nz-button (click)="goback()">返回</button>
</div> </div>
<div class="warningnumber" *ngIf="isWarning"> <!-- <div class="warningnumber" *ngIf="isWarning">
<img src="../../../assets/images/warningnum.png" alt=""> <img src="../../../assets/images/warningnum.png" alt="">
<span class="num">{{num}}</span> <span class="num">{{num}}</span>
<span class="today">今日预警</span> <span class="today">今日预警</span>
</div> </div> -->
</div> </div>
<div class="content"> <div class="content">
<router-outlet></router-outlet> <router-outlet></router-outlet>

41
src/app/pages/home/home.component.scss

@ -8,6 +8,8 @@
flex-direction: column; flex-direction: column;
} }
.menu { .menu {
height: 56px; height: 56px;
width: 100%; width: 100%;
@ -15,13 +17,13 @@
justify-content: center; justify-content: center;
font-size: 17px; font-size: 17px;
background: url('../../../assets/images/navbg.png') no-repeat; background: url('../../../assets/images/navbg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 115%;
position: relative; position: relative;
li { li {
width: 10%; width: 10%;
height: 46px; height: 52px;
line-height: 46px; line-height: 52px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
font-family: sybold; font-family: sybold;
@ -30,6 +32,35 @@
} }
.boxleft {
position: absolute;
left: 24px;
top: 16px;
img{
width: 154px;
}
}
.boxright {
position: absolute;
right: 24px;
top: 12px;
display: flex;
align-items: center;
span {
font-size: 16px;
color: #FFFFFF;
opacity: 0.6;
}
img {
width: 36px;
height: 36px;
}
}
.backbtn { .backbtn {
position: absolute; position: absolute;
right: 26px; right: 26px;
@ -80,5 +111,7 @@
} }
.router-link-active { .router-link-active {
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, #1c8199 50%, rgba(35, 153, 255, 0) 100%); // background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, #1c8199 50%, rgba(35, 153, 255, 0) 100%);
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, #36A2FF 50%, rgba(35, 153, 255, 0) 100%);
} }

120
src/app/pages/home/home.component.ts

@ -3,6 +3,9 @@ import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { Title } from '@angular/platform-browser' import { Title } from '@angular/platform-browser'
import { filter } from 'rxjs/operators'; import { filter } from 'rxjs/operators';
import { NavChangeService } from 'src/app/service/navChange.service'; import { NavChangeService } from 'src/app/service/navChange.service';
import { CacheTokenService } from '../../service/cache-token.service' //引入服务
import { CookieService } from 'ngx-cookie-service';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
templateUrl: './home.component.html', templateUrl: './home.component.html',
@ -10,24 +13,36 @@ import { NavChangeService } from 'src/app/service/navChange.service';
}) })
export class HomeComponent implements OnInit { export class HomeComponent implements OnInit {
constructor(private router: Router, private navChangeService: NavChangeService) { } constructor(private router: Router, private navChangeService: NavChangeService, public token: CacheTokenService,
private cookieService: CookieService, private message: NzMessageService) { }
isGasStationNav: boolean isGasStationNav: boolean
isGasStation: boolean isGasStation: boolean
isWarning: boolean = false//是否是今日预警页面 isWarning: boolean = false//是否是今日预警页面
num num
surname: string
userName: string
// isGasStation: string
ngOnInit(): void { ngOnInit(): void {
this.navChangeService.getMessage().subscribe((message: any) => { this.navChangeService.getMessage().subscribe((message: any) => {
console.log(message);//send a message console.log(message);//send a message
if(message.name == 'oilstation'){ if (message.name == 'oilstation') {
this.isGasStationNav = true this.isGasStationNav = true
} }
if(message.name == '改变数量'){ if (message.name == '改变数量') {
this.isWarning = true this.isWarning = true
this.num = message.num this.num = message.num
} }
}); });
if (this.router.url.indexOf('warning') != -1) {
this.isWarning = true
} else {
this.isWarning = false
}
if (this.router.url.indexOf('petrolStation') != -1 && sessionStorage.getItem('isGasStation') == 'false') {//控制返回按钮显示 if (this.router.url.indexOf('petrolStation') != -1 && sessionStorage.getItem('isGasStation') == 'false') {//控制返回按钮显示
this.isGasStation = true this.isGasStation = true
} else { } else {
@ -35,8 +50,10 @@ export class HomeComponent implements OnInit {
} }
if (sessionStorage.getItem('isGasStation') == 'true') { if (sessionStorage.getItem('isGasStation') == 'true') {
this.isGasStation = true
this.isGasStationNav = true this.isGasStationNav = true
} else { } else {
this.isGasStation = false
this.isGasStationNav = false this.isGasStationNav = false
} }
@ -44,7 +61,7 @@ export class HomeComponent implements OnInit {
filter(event => event instanceof NavigationEnd) filter(event => event instanceof NavigationEnd)
).subscribe((event: any) => { ).subscribe((event: any) => {
if (event.url.indexOf('warning') != -1) {//控制今日预警左上角数字显示 if (event.url.indexOf('warning') != -1) {//控制今日预警左上角数字显示
this.isWarning = true
} else { } else {
this.isWarning = false this.isWarning = false
} }
@ -54,12 +71,107 @@ export class HomeComponent implements OnInit {
this.isGasStation = false this.isGasStation = false
} }
}); });
setInterval(() => {
this.getTime()
}, 1000);
this.isGasStation = JSON.parse(sessionStorage.getItem('isGasStation'))
if (this.isGasStation) {
this.surname = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).name
this.userName = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).userName
} else {
this.surname = JSON.parse(sessionStorage.getItem('userdata')).name
this.userName = JSON.parse(sessionStorage.getItem('userdata')).userName
}
} }
//获得时间
time: string
getTime() {
let myDate = new Date();
let y = myDate.getFullYear();
let M = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
let d = myDate.getDate(); //获取当前日(1-31)
let h = myDate.getHours(); //获取当前小时数(0-23)
let m = myDate.getMinutes(); //获取当前分钟数(0-59)
let s = myDate.getSeconds(); //获取当前秒数(0-59)
//检查是否小于10
M = check(M);
d = check(d);
h = check(h);
m = check(m);
s = check(s);
let timestr = y + "-" + M + "-" + d + " " + h + ":" + m + ":" + s;
this.time = timestr;
//时间数字小于10,则在之前加个“0”补位。
function check(i) {
let num = (i < 10) ? ("0" + i) : i;
return num;
}
}
//退出系统
signOut() {
this.message.create('success', `退出成功`);
this.token.delete()
sessionStorage.clear()
// window.localStorage.clear()
localStorage.removeItem("isautologin")
this.cookieService.set("token", '', new Date(new Date().getTime() + 1), '/');
this.cookieService.set("refreshToken", '', new Date(new Date().getTime() + 1), '/');
this.router.navigate(['/login'])
}
navChange(router) {
this.router.navigate([router])
}
goback() { goback() {
this.router.navigate(['/plan']) this.router.navigate(['/plan'])
this.isGasStationNav = false this.isGasStationNav = false
} }
//全屏
isfullscreen: boolean = false;
fullscreenToggle() {
const docElmWithBrowsersFullScreenFunctions = document.documentElement as HTMLElement & {
mozRequestFullScreen(): Promise<void>;
webkitRequestFullscreen(): Promise<void>;
msRequestFullscreen(): Promise<void>;
};
if (docElmWithBrowsersFullScreenFunctions.requestFullscreen) {
docElmWithBrowsersFullScreenFunctions.requestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen) { /* Firefox */
docElmWithBrowsersFullScreenFunctions.mozRequestFullScreen();
} else if (docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
docElmWithBrowsersFullScreenFunctions.webkitRequestFullscreen();
} else if (docElmWithBrowsersFullScreenFunctions.msRequestFullscreen) { /* IE/Edge */
docElmWithBrowsersFullScreenFunctions.msRequestFullscreen();
}
this.isfullscreen = true;
}
closefullscreen() {
const docWithBrowsersExitFunctions = document as Document & {
mozCancelFullScreen(): Promise<void>;
webkitExitFullscreen(): Promise<void>;
msExitFullscreen(): Promise<void>;
};
if (docWithBrowsersExitFunctions.exitFullscreen) {
docWithBrowsersExitFunctions.exitFullscreen();
} else if (docWithBrowsersExitFunctions.mozCancelFullScreen) { /* Firefox */
docWithBrowsersExitFunctions.mozCancelFullScreen();
} else if (docWithBrowsersExitFunctions.webkitExitFullscreen) { /* Chrome, Safari and Opera */
docWithBrowsersExitFunctions.webkitExitFullscreen();
} else if (docWithBrowsersExitFunctions.msExitFullscreen) { /* IE/Edge */
docWithBrowsersExitFunctions.msExitFullscreen();
}
this.isfullscreen = false;
}
} }

2
src/app/pages/left-domain/left-domain.component.html

@ -149,7 +149,7 @@
</div> </div>
<ul> <ul>
<li class="publicDisposal disposalContent" *ngFor="let items of item.nodes;let keys = index;"> <li class="publicDisposal disposalContent" *ngFor="let items of item.nodes;let keys = index;">
<span (click)='selectNode(item,items)' [ngClass]="{'selectNode': selectNodeId == items.id && selectPlanId == item.id}">{{items.name}}</span> <span nz-popconfirm nzPopconfirmTitle="切换节点后,没保存的信息将会丢失!" [nzCondition]="!editMode" (nzOnConfirm)="selectNode(item,items,keys)" [ngClass]="{'selectNode': selectNodeId == items.id && selectPlanId == item.id}">{{items.name}}</span>
<label *ngIf="editMode"><i nz-icon nzType="save" nzTheme="outline" (click)="saveDisposal(item.id,items.id)"></i><i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal(item,items)"></i></label> <label *ngIf="editMode"><i nz-icon nzType="save" nzTheme="outline" (click)="saveDisposal(item.id,items.id)"></i><i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal(item,items)"></i></label>
</li> </li>
</ul> </ul>

58
src/app/pages/left-domain/left-domain.component.ts

@ -208,48 +208,32 @@ export class LeftDomainComponent implements OnInit {
} }
//选中 数据节点 //选中 数据节点
selectNode(item: MarkPlanData, e: MarkNodeData) { selectNode(item: MarkPlanData, e: MarkNodeData, index: number) {
if (this.selectPlanId != item.id || this.selectNodeId != e.id) { //选中 if (this.selectPlanId != item.id || this.selectNodeId != e.id) { //选中
if (!MarkWindow.instance.currentMarkNodeInfo) { //未选中节点 this.updateFatherData(index) //更新/初始化父组件 数据
PlanComponent.instance.beforeEmergencyPlan = item this.selectPlanId = item.id
PlanComponent.instance.beforePlanNode = e this.selectNodeId = e.id
PlanComponent.instance.nzCurrent = -1 MarkWindow.instance.selectMarkNode(item.id, e.id)
PlanComponent.instance.timer? window.clearTimeout(PlanComponent.instance.timer) : null //清除定时器 PlanComponent.instance.beforeEmergencyPlan = item
this.selectPlanId = item.id PlanComponent.instance.beforePlanNode = MarkWindow.instance.currentMarkNodeInfo.nodeData
this.selectNodeId = e.id
MarkWindow.instance.selectMarkNode(item.id, e.id)
} else { //已选中节点
let isTrue = true;
if (ModeManager.currentMode == ModeType.Edit) {
isTrue = confirm('切换节点后,没保存的信息将会丢失!')
}
if (isTrue) {
PlanComponent.instance.beforeEmergencyPlan = item
PlanComponent.instance.beforePlanNode = e
PlanComponent.instance.nzCurrent = -1
PlanComponent.instance.timer? window.clearTimeout(PlanComponent.instance.timer) : null //清除定时器
this.selectPlanId = item.id
this.selectNodeId = e.id
MarkWindow.instance.selectMarkNode(item.id, e.id)
}
}
} else if (this.selectPlanId === item.id && this.selectNodeId === e.id) { //取消选中 } else if (this.selectPlanId === item.id && this.selectNodeId === e.id) { //取消选中
let isTrue = true; PlanComponent.instance.beforeEmergencyPlan = new MarkPlanData(-99, "请选择节点")
if (ModeManager.currentMode == ModeType.Edit) { PlanComponent.instance.beforePlanNode = new MarkNodeData(-99, "请选择节点")
isTrue = confirm('切换节点后,没保存的信息将会丢失!') this.updateFatherData(index) //更新/初始化父组件 数据
} this.selectPlanId = null
if (isTrue) { this.selectNodeId = null
PlanComponent.instance.beforeEmergencyPlan = new MarkPlanData(-99, "请选择节点") MarkWindow.instance.selectMarkNode(null, null)
PlanComponent.instance.beforePlanNode = new MarkNodeData(-99, "请选择节点")
PlanComponent.instance.nzCurrent = -1
PlanComponent.instance.timer? window.clearTimeout(PlanComponent.instance.timer) : null //清除定时器
this.selectPlanId = null
this.selectNodeId = null
MarkWindow.instance.selectMarkNode(null, null)
}
} }
} }
//更新/初始化父组件 数据
updateFatherData(index) {
PlanComponent.instance.nzCurrent = index
PlanComponent.instance.isSuspend = true //暂停
PlanComponent.instance.timer? window.clearTimeout(PlanComponent.instance.timer) : null //清除定时器
PlanComponent.instance.updateTimer? window.clearTimeout(PlanComponent.instance.updateTimer) : null //清除定时器
}
saveDisposalDialog: boolean = false; //整体保存预案 弹窗 saveDisposalDialog: boolean = false; //整体保存预案 弹窗
saveType: number = null; //新建保存/保存到已有 弹窗 saveType: number = null; //新建保存/保存到已有 弹窗
allNodeList: any[] = []; //所有根节点/节点 allNodeList: any[] = []; //所有根节点/节点

27
src/app/pages/login/login.component.html

@ -1,6 +1,8 @@
<div class="login" id="login"> <div class="login" id="login">
<div class="card"> <div class="card">
<h1 class="cardheader">欢迎登陆</h1> <h1 class="cardheader">欢迎登陆</h1>
<h1 class="cardheader">中化石油智能安全管理系统</h1>
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item> <nz-form-item>
<nz-form-control nzErrorTip="请输入账号!"> <nz-form-control nzErrorTip="请输入账号!">
@ -51,9 +53,26 @@
<div class="name"> <div class="name">
<img src="../../../assets/images/logo.png" alt=""> <img src="../../../assets/images/logo2.png" alt="">
<h1>中化石油</h1> <!-- <h1>中化石油</h1>
<h1>智能安全管理系统</h1> <h1>智能安全管理系统</h1> -->
</div> </div>
</div> </div>
<ng-template>
<div class="topbox">
<div>
<img src="../assets/images/AnXinQQ.jpg" alt="">
</div>
<div class="text">
<span>您有一条新的预警提醒!</span>
<span>这是详细描述这是详细描述这是详细描述...</span>
</div>
</div>
<div class="btnbox">
<button class="look" nz-button type="button">查看</button>
<button class="lose" nz-button type="button">忽略</button>
</div>
</ng-template>

21
src/app/pages/login/login.component.scss

@ -8,8 +8,9 @@
.card { .card {
position: absolute; position: absolute;
top: 20%; top: 50%;
right: 12%; left: 50%;
transform: translate(-50%,-50%);
background-color: rgba(0, 13, 33, 0.24); background-color: rgba(0, 13, 33, 0.24);
border-radius: 16px; border-radius: 16px;
width: 456px; width: 456px;
@ -20,10 +21,12 @@
} }
.cardheader { .cardheader {
font-size: 28px; font-size: 22px;
margin-bottom: 66px;
color: rgba(255, 255, 255, 1); color: rgba(255, 255, 255, 1);
} }
.cardheader:nth-child(2) {
margin-bottom: 40px;
}
label { label {
color: #fff; color: #fff;
@ -33,7 +36,7 @@ label {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 6px; margin-bottom: 6px;
align-items: center;
.forget { .forget {
cursor: pointer; cursor: pointer;
color: #2399FF; color: #2399FF;
@ -69,11 +72,13 @@ p {
.name { .name {
position: absolute; position: absolute;
left: 10%; left:40px;
bottom: 45%; top:40px;
img { img {
margin-bottom: 32px; // margin-bottom: 32px;
width: 254px;
height: 56px;
} }
h1 { h1 {

69
src/app/pages/login/login.component.ts

@ -1,4 +1,4 @@
import { Component, OnInit, AfterViewInit, ViewChild } from '@angular/core'; import { Component, OnInit, AfterViewInit, ViewChild, TemplateRef } from '@angular/core';
import { HttpClient } from '@angular/common/http' import { HttpClient } from '@angular/common/http'
import { Router, ActivatedRoute } from '@angular/router' import { Router, ActivatedRoute } from '@angular/router'
import { CacheTokenService } from '../../service/cache-token.service'//引入服务 import { CacheTokenService } from '../../service/cache-token.service'//引入服务
@ -6,6 +6,9 @@ import { CookieService } from 'ngx-cookie-service';//cookie插件
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd/message'; import { NzMessageService } from 'ng-zorro-antd/message';
import { Base64 } from 'js-base64'; import { Base64 } from 'js-base64';
import { NzNotificationService } from 'ng-zorro-antd/notification';
declare var abp: any
@Component({ @Component({
selector: 'app-login', selector: 'app-login',
templateUrl: './login.component.html', templateUrl: './login.component.html',
@ -15,8 +18,8 @@ import { Base64 } from 'js-base64';
export class LoginComponent implements OnInit { export class LoginComponent implements OnInit {
validateForm!: FormGroup; validateForm!: FormGroup;
@ViewChild(TemplateRef, { static: false }) template?: TemplateRef<{}>;
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, private cookieService: CookieService, private fb: FormBuilder, private message: NzMessageService) { } constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, private cookieService: CookieService, private fb: FormBuilder, private message: NzMessageService, private notificationService: NzNotificationService) { }
ngOnInit() { ngOnInit() {
this.validateForm = this.fb.group({ this.validateForm = this.fb.group({
@ -74,6 +77,8 @@ export class LoginComponent implements OnInit {
remember: any//记住密码 remember: any//记住密码
autologin: any//自动登录 autologin: any//自动登录
isLoading = false; isLoading = false;
messages
encryptedAccessToken
submitForm(): void { submitForm(): void {
if (!this.remember) { if (!this.remember) {
@ -102,6 +107,8 @@ export class LoginComponent implements OnInit {
sessionStorage.setItem("token", data.result.accessToken); sessionStorage.setItem("token", data.result.accessToken);
this.cookieService.set("token", data.result.accessToken, null, '/'); this.cookieService.set("token", data.result.accessToken, null, '/');
this.cookieService.set("refreshToken", data.result.encryptedAccessToken, null, '/'); this.cookieService.set("refreshToken", data.result.encryptedAccessToken, null, '/');
this.encryptedAccessToken = data.result.encryptedAccessToken
console.log('token', data)
this.http.get('/api/services/app/Session/GetCurrentLoginInformations').subscribe((data: any) => { this.http.get('/api/services/app/Session/GetCurrentLoginInformations').subscribe((data: any) => {
sessionStorage.setItem('userdata', JSON.stringify(data.result.user)) sessionStorage.setItem('userdata', JSON.stringify(data.result.user))
sessionStorage.setItem('userdataOfgasstation', JSON.stringify(data.result.user)) sessionStorage.setItem('userdataOfgasstation', JSON.stringify(data.result.user))
@ -111,6 +118,7 @@ export class LoginComponent implements OnInit {
//自动登陆 //自动登陆
this.autoLogin() this.autoLogin()
if (data.result.user.userName == 'admin') { if (data.result.user.userName == 'admin') {
sessionStorage.setItem("isGasStation", 'false');
this.router.navigate(['/system/organization']) this.router.navigate(['/system/organization'])
} else { } else {
if (data.result.user.organization.isGasStation) { if (data.result.user.organization.isGasStation) {
@ -122,6 +130,58 @@ export class LoginComponent implements OnInit {
} }
} }
this.message.create('success', `登陆成功`); this.message.create('success', `登陆成功`);
function loadScript(url, callback) {
var s: any = document.createElement('script');
s.type = 'text/javascript';
if (s.readyState) {
s.onreadystatechange = function () { //兼容IE
if (s.readyState == 'complete' || s.readyState == 'loaded') {
callback();
}
}
} else {
s.onload = function () { //safari chrome opera firefox
callback();
}
}
s.src = url;
document.head.appendChild(s);
}
let _this = this;
loadScript('./assets/js/abp.signalr-client.js', () => {
abp.signalr = {
autoConnect: true,
connect: undefined,
hubs: undefined,
qs: "enc_auth_token" + "=" + encodeURIComponent(_this.encryptedAccessToken),
remoteServiceBaseUrl: "http://39.106.78.171:8906",
url: '/signalr'
};
//手动实现hub
//this.hubConnection = new signalR.HubConnectionBuilder()
// .withUrl('/signalr-violation',
// {
// accessTokenFactory: ()=>this.token
// }
// )
// .build();
////服务器回调方法
//this.hubConnection.on('SendViolation', (data) => {
// console.log("SendViolation", data);
// _this.messages.push("SendViolation:"+JSON.stringify(data));
//});
//this.hubConnection.start();
//abp封装的hub
abp.event.on('abp.notifications.received', function (userNotification) {
_this.messages.push("abp.notifications.received:" + JSON.stringify(userNotification));
console.log('abp.notifications.received成功收到了哈哈哈', userNotification);
});
})
}, err => { }, err => {
this.isLoading = false; this.isLoading = false;
}) })
@ -136,6 +196,9 @@ export class LoginComponent implements OnInit {
) )
} }
receiptOfNotification() {
this.notificationService.template(this.template!, { nzPlacement: 'bottomRight', nzClass: 'receiptOfNotification', nzDuration: 0 });
}
roleList = [ roleList = [
'管理员', '职工' '管理员', '职工'

15
src/app/pages/pages.module.ts

@ -32,6 +32,11 @@ import { NzSpinModule } from 'ng-zorro-antd/spin';
import { NzTreeModule } from 'ng-zorro-antd/tree'; import { NzTreeModule } from 'ng-zorro-antd/tree';
import { NzCollapseModule } from 'ng-zorro-antd/collapse'; import { NzCollapseModule } from 'ng-zorro-antd/collapse';
import { NzStepsModule } from 'ng-zorro-antd/steps'; import { NzStepsModule } from 'ng-zorro-antd/steps';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
import { NzProgressModule } from 'ng-zorro-antd/progress';
import { NzPopconfirmModule } from 'ng-zorro-antd/popconfirm';
import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component'; import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component';
import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component'; import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component';
import { EquipmentInfoComponent } from './equipment-info/equipment-info.component'; import { EquipmentInfoComponent } from './equipment-info/equipment-info.component';
@ -42,9 +47,8 @@ import { EditequipmentComponent } from './equipment-info/editequipment/editequip
import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select'; import { NzTreeSelectModule } from 'ng-zorro-antd/tree-select';
import { PlanAdminComponent } from './plan-admin/plan-admin.component'; import { PlanAdminComponent } from './plan-admin/plan-admin.component';
import { GetOutOfLineDetailsComponent } from './today-warning/get-out-of-line-details/get-out-of-line-details.component'; import { GetOutOfLineDetailsComponent } from './today-warning/get-out-of-line-details/get-out-of-line-details.component';
import { NzTableModule } from 'ng-zorro-antd/table'; import { NzNotificationModule } from 'ng-zorro-antd/notification';
import { NzCheckboxModule } from 'ng-zorro-antd/checkbox';
import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
@NgModule({ @NgModule({
declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
@ -83,7 +87,10 @@ import { NzTimePickerModule } from 'ng-zorro-antd/time-picker';
NzStepsModule, NzStepsModule,
NzTableModule, NzTableModule,
NzCheckboxModule, NzCheckboxModule,
NzTimePickerModule NzTimePickerModule,
NzProgressModule,
NzNotificationModule,
NzPopconfirmModule
], ],
entryComponents: [AddequipmentComponent, EditequipmentComponent,GetOutOfLineDetailsComponent], entryComponents: [AddequipmentComponent, EditequipmentComponent,GetOutOfLineDetailsComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA] schemas: [CUSTOM_ELEMENTS_SCHEMA]

2
src/app/pages/plan-admin/plan-admin.component.html

@ -81,7 +81,7 @@
<th>{{item.laneCount}}</th> <th>{{item.laneCount}}</th>
<th>{{item.tankVolume}}</th> <th>{{item.tankVolume}}</th>
<th> <th>
<span class="look" (click)="look()" style="cursor:pointer;color: #36A2FF">查看</span> <span class="look" (click)="look(item)" style="cursor:pointer;color: #36A2FF">查看</span>
</th> </th>
</tr> </tr>
</tbody> </tbody>

46
src/app/pages/plan-admin/plan-admin.component.ts

@ -33,10 +33,29 @@ export class PlanAdminComponent implements OnInit {
if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) { if (event.target.scrollHeight - (event.target.scrollTop + event.target.clientHeight) <= 10) {
console.log('需要加载数据了', event) console.log('需要加载数据了', event)
this.SkipCount = String(Number(this.SkipCount) + 50) this.SkipCount = String(Number(this.SkipCount) + 50)
await this.getGasStation() // await this.getGasStation()
let params = {
StationName: this.validateForm.value.name,
OrganizationUnitId: String(this.OrganizationUnitId),
IsContainsChildren: 'true',
SkipCount: this.SkipCount,
MaxResultCount: this.MaxResultCount
}
await new Promise((resolve, reject) => {
this.http.get('/api/services/app/GasStation/GetAll', {
params: params
}).subscribe((data: any) => {
this.list = this.list.concat(data.result.items);
this.list = [...this.list]
resolve(data)
})
})
} }
}); });
} }
submitForm(): void { submitForm(): void {
for (const i in this.validateForm.controls) { for (const i in this.validateForm.controls) {
this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].markAsDirty();
@ -83,7 +102,7 @@ export class PlanAdminComponent implements OnInit {
let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id
let params = { let params = {
OrganizationUnitId: OrganizationUnitId, OrganizationUnitId: OrganizationUnitId,
IsContainsChildren: "false" IsContainsChildren: "true"
} }
this.http.get('/api/services/app/Organization/GetAll', { this.http.get('/api/services/app/Organization/GetAll', {
params: params params: params
@ -93,9 +112,9 @@ export class PlanAdminComponent implements OnInit {
element.parentId = null element.parentId = null
} }
}); });
// data.result.items = data.result.items.filter((item, i) => { data.result.items = data.result.items.filter((item, i) => {
// return !item.isGasStation return !item.isGasStation
// }) })
for (let index = 0; index < data.result.items.length; index++) { for (let index = 0; index < data.result.items.length; index++) {
const element = data.result.items[index]; const element = data.result.items[index];
element.key = element.id element.key = element.id
@ -115,7 +134,16 @@ export class PlanAdminComponent implements OnInit {
return (document.getElementById('tablebox').clientHeight - 42) + 'px' return (document.getElementById('tablebox').clientHeight - 42) + 'px'
} }
look() { look(item) {
let gastionobj = {
organization: {
displayName: item.stationName,
isGasStation: true,
id: item.organizationUnitId
}
}
sessionStorage.setItem('userdataOfgasstation', JSON.stringify(gastionobj))
this.router.navigate(['/plan/petrolStation']) this.router.navigate(['/plan/petrolStation'])
let obj = { let obj = {
name: 'oilstation' name: 'oilstation'
@ -150,10 +178,10 @@ export class PlanAdminComponent implements OnInit {
this.http.get('/api/services/app/GasStation/GetAll', { this.http.get('/api/services/app/GasStation/GetAll', {
params: params params: params
}).subscribe((data: any) => { }).subscribe((data: any) => {
this.list = this.list.concat(data.result.items); // this.list = this.list.concat(data.result.items);
this.list = [...this.list] this.list = [...data.result.items]
resolve(data) resolve(data)
console.log(999999, data) // console.log(999999, data)
}) })
}) })
} }

52
src/app/pages/plan/plan.component.html

@ -158,20 +158,19 @@
</ul> </ul>
</nz-dropdown-menu> </nz-dropdown-menu>
<label> <label>
<nz-steps *ngIf="beforeEmergencyPlan.nodes && beforeEmergencyPlan.nodes.length" [nzCurrent]="nzCurrent" [nzProgressDot]="progressTemplate" (nzIndexChange)="changePlanNode($event)"> <ng-container *ngIf="beforeEmergencyPlan.nodes && beforeEmergencyPlan.nodes.length">
<nz-step *ngFor="let item of beforeEmergencyPlan.nodes;" title="{{item.name}}"></nz-step> <div class="progress" *ngFor="let item of beforeEmergencyPlan.nodes;let key = index;" title="{{item.name}}" [ngStyle]="{'flex': getProgressFlex(item)}">
<nz-step></nz-step> <img src="../../../assets/images/stepIcon.png" (click)="changePlanNode(key)">
</nz-steps> <div><nz-progress [nzShowInfo]="false" [nzPercent]="progressList[key]" nzStrokeColor="#1890FF" nzStatus="active"></nz-progress></div>
<ng-template #progressTemplate let-index="index"> </div>
<img src="../../../assets/images/stepIcon.png" style="margin-left: -100%;" *ngIf="index != beforeEmergencyPlan.nodes.length"> </ng-container>
</ng-template>
</label> </label>
<label> <label>
<i nz-icon nzType="backward" nzTheme="outline" (click)="toLast()"></i> <i nz-icon nzType="backward" nzTheme="outline" (click)="toLast()" title="上一个节点"></i>
<i nz-icon nzType="pause" nzTheme="outline" (click)="suspend(true)" [hidden]="isSuspend"></i> <i nz-icon nzType="pause" nzTheme="outline" (click)="suspend(true)" [hidden]="isSuspend" title="暂停"></i>
<i nz-icon nzType="play-circle" nzTheme="outline" (click)="suspend(false)" [hidden]="!isSuspend"></i> <i nz-icon nzType="play-circle" nzTheme="outline" (click)="suspend(false)" [hidden]="!isSuspend" title="开启"></i>
<i nz-icon nzType="border" nzTheme="outline" (click)="initialize()"></i> <i nz-icon nzType="border" nzTheme="outline" (click)="initialize()" title="初始化"></i>
<i nz-icon nzType="forward" nzTheme="outline" (click)="toNext()"></i> <i nz-icon nzType="forward" nzTheme="outline" (click)="toNext()" title="下一个节点"></i>
</label> </label>
</div> </div>
</div> </div>
@ -205,6 +204,35 @@
</form> </form>
</nz-modal> </nz-modal>
<!-- 新增/编辑左侧建筑弹窗 --> <!-- 新增/编辑左侧建筑弹窗 -->
<!-- 应急预案设备任务弹窗 -->
<nz-modal nzClassName="taskDialog" [(nzVisible)]="contingencyPlanTask" nzTitle="设备任务栏" (nzOnCancel)="contingencyPlanTask = null;" (nzOnOk)="submitTaskForm(taskForm.value)" [nzOkDisabled]='companyName.invalid'>
<form nz-form #taskForm='ngForm'>
<nz-form-item>
<nz-form-label [nzSpan]="6">名称</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #companyName='ngModel' [(ngModel)]="taskDialog.institution" name="companyName" required/>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">任务</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #taskName='ngModel' [(ngModel)]="taskDialog.task" name="taskName" autocomplete="off" nz-dropdown [nzDropdownMenu]="taskList"/>
<nz-dropdown-menu #taskList="nzDropdownMenu">
<ul nz-menu>
<li nz-menu-item *ngFor="let item of allTaskList" (click)="taskDialog.task = item.taskName;">{{item.taskName}}</li>
</ul>
</nz-dropdown-menu>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">备注</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<textarea nz-input #description='ngModel' [(ngModel)]="taskDialog.description" name="description"></textarea>
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<!-- 应急预案设备任务弹窗 -->
</div> </div>
</div> </div>

8
src/app/pages/plan/plan.component.scss

@ -362,9 +362,13 @@
} }
label:nth-child(2){ label:nth-child(2){
flex: 1; flex: 1;
display: flex;
overflow: hidden; overflow: hidden;
//.anticon{ font-size: 16px; color: #23D9FF; } .progress{
img{ height: 35px; width: auto; vertical-align: top; } display: flex;
div { flex: 1; line-height: 30px; }
img{ width: 27px; height: 35px; display: block; cursor: pointer; }
}
} }
label:last-child{ label:last-child{
width: 15%; width: 15%;

213
src/app/pages/plan/plan.component.ts

@ -20,7 +20,7 @@ import { NzMessageService } from 'ng-zorro-antd/message';
import { LeftDomainComponent } from '../left-domain/left-domain.component'; import { LeftDomainComponent } from '../left-domain/left-domain.component';
import { JYZInfoMoudleType } from 'src/app/babylon/model/data/institution/jyz-show-data'; import { JYZInfoMoudleType } from 'src/app/babylon/model/data/institution/jyz-show-data';
import { AllMarkData } from 'src/app/babylon/model/data/mark/all-mark-data'; import { AllMarkData } from 'src/app/babylon/model/data/mark/all-mark-data';
import { MarkData } from 'src/app/babylon/model/data/mark/mark-data'; import { MarkData, MarkTask } from 'src/app/babylon/model/data/mark/mark-data';
import { MarkWindow } from 'src/app/babylon/view/mark-window/mark-window'; import { MarkWindow } from 'src/app/babylon/view/mark-window/mark-window';
import { AllMarkPlanData, MarkNodeData, MarkPlanData } from 'src/app/babylon/model/data/mark/mark-plan-data'; import { AllMarkPlanData, MarkNodeData, MarkPlanData } from 'src/app/babylon/model/data/mark/mark-plan-data';
@ -339,6 +339,8 @@ export class PlanComponent implements OnInit {
nzCurrent: number = -1; //当前选择 预案节点Index nzCurrent: number = -1; //当前选择 预案节点Index
isSuspend: boolean = false; //是否暂停 自动切换节点 isSuspend: boolean = false; //是否暂停 自动切换节点
timer: any; //定时器 timer: any; //定时器
progressList: number[] = []; //进度条 条/值
updateTimer: any; //更新进度条定时器
//初始化 应急预案模块 //初始化 应急预案模块
initializePlan() { initializePlan() {
@ -346,14 +348,21 @@ export class PlanComponent implements OnInit {
this.beforePlanNode = new MarkNodeData(-99, "请选择节点") this.beforePlanNode = new MarkNodeData(-99, "请选择节点")
this.isSuspend = false //初始化暂停状态 this.isSuspend = false //初始化暂停状态
window.clearTimeout(this.timer) //清除定时器 window.clearTimeout(this.timer) //清除定时器
this.progressList = []
window.clearTimeout(this.updateTimer) //清除定时器
} }
//公用 切换选中节点 //公用 切换选中节点
publicToggleNode() { publicToggleNode() {
this.beforePlanNode = this.beforeEmergencyPlan.nodes[this.nzCurrent] return new Promise((resolve, reject) => {
this.leftDomain.selectPlanId = this.beforeEmergencyPlan.id this.beforePlanNode = this.beforeEmergencyPlan.nodes[this.nzCurrent]
this.leftDomain.selectNodeId = this.beforePlanNode.id this.leftDomain.selectPlanId = this.beforeEmergencyPlan.id
MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true) this.leftDomain.selectNodeId = this.beforePlanNode.id
MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true)
this.beforePlanNode = MarkWindow.instance.currentMarkNodeInfo.nodeData
this.updateProgress() //更新进度条
resolve(true)
})
} }
//选中 底部一级节点 开启自动播放 //选中 底部一级节点 开启自动播放
@ -363,10 +372,14 @@ export class PlanComponent implements OnInit {
let isTrue = confirm("即将开始播放节点") let isTrue = confirm("即将开始播放节点")
if (isTrue) { if (isTrue) {
this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.timer? window.clearTimeout(this.timer) : null //清除定时器
this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器
this.nzCurrent = 0 this.nzCurrent = 0
this.beforeEmergencyPlan = item this.beforeEmergencyPlan = item
this.publicToggleNode() this.updateProgressList().then(res=>{
!this.isSuspend? this.autoPlay() : null this.publicToggleNode().then(data=>{
!this.isSuspend? this.autoPlay() : null
})
})
} }
} else { } else {
this.message.info('暂无数据节点'); this.message.info('暂无数据节点');
@ -374,31 +387,55 @@ export class PlanComponent implements OnInit {
} }
} }
//自动播放-切换接点 //更新进度条 值
autoPlay() { updateProgress() {
if (this.nzCurrent >= this.beforeEmergencyPlan.nodes.length - 1) { if (this.progressList[this.nzCurrent] >= 100) {
this.nzCurrent = this.nzCurrent + 1 this.progressList[this.nzCurrent] = 100
this.isSuspend = false //初始化暂停状态 window.clearTimeout(this.updateTimer) //清除定时器
window.clearTimeout(this.timer) //清除定时器
this.message.info('已播放至最后一节点');
return return
} }
let time: number = this.beforePlanNode.getShowTime() let time: number = this.beforePlanNode.getShowTime() || 1
console.log(`所需${time}s`) this.updateTimer = window.setTimeout(()=>{
this.progressList[this.nzCurrent] = this.progressList[this.nzCurrent] + Math.ceil(100 / time)
this.updateProgress()
},1000)
}
//更新进度条 条数
updateProgressList() {
return new Promise((resolve, reject) => {
this.progressList = []
this.beforeEmergencyPlan.nodes.forEach(item=>{ this.progressList.push(0) })
resolve(true)
})
}
//自动播放-切换接点
autoPlay() {
let time: number = this.beforePlanNode.getShowTime() || 1
this.timer = window.setTimeout(()=>{ this.timer = window.setTimeout(()=>{
if (this.nzCurrent >= this.beforeEmergencyPlan.nodes.length - 1) {
this.isSuspend = false //初始化暂停状态
window.clearTimeout(this.timer) //清除定时器
this.message.info('已播放至最后一节点');
return
}
this.nzCurrent = this.nzCurrent + 1 this.nzCurrent = this.nzCurrent + 1
this.publicToggleNode() this.publicToggleNode().then(data=>{
!this.isSuspend? this.autoPlay() : null !this.isSuspend? this.autoPlay() : null
})
},time * 1000) },time * 1000)
} }
//切换预案节点 //切换预案节点
changePlanNode(event){ changePlanNode(event){
if (event === this.beforeEmergencyPlan.nodes.length) { if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) {
return this.updateProgressList()
} }
this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.timer? window.clearTimeout(this.timer) : null //清除定时器
this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器
this.nzCurrent = event this.nzCurrent = event
this.progressList[this.nzCurrent] = 0
this.publicToggleNode() this.publicToggleNode()
} }
@ -412,10 +449,16 @@ export class PlanComponent implements OnInit {
this.message.info('目前已经是第一节点'); this.message.info('目前已经是第一节点');
return return
} }
if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) {
this.updateProgressList()
}
this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.timer? window.clearTimeout(this.timer) : null //清除定时器
this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器
this.nzCurrent = this.nzCurrent - 1 this.nzCurrent = this.nzCurrent - 1
this.publicToggleNode() this.progressList[this.nzCurrent] = 0
!this.isSuspend? this.autoPlay() : null this.publicToggleNode().then(data=>{
//!this.isSuspend? this.autoPlay() : null
})
} }
//切换预案节点 暂停 //切换预案节点 暂停
@ -424,13 +467,21 @@ export class PlanComponent implements OnInit {
this.message.info('请选择节点'); this.message.info('请选择节点');
return return
} }
if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) {
this.updateProgressList()
}
this.isSuspend = isSuspend this.isSuspend = isSuspend
let msg: string = this.isSuspend? "目前已暂停" : "目前已开始播放" let msg: string = this.isSuspend? "目前已暂停" : "目前已开始播放"
this.message.info(msg); this.message.info(msg);
if (this.isSuspend) { //暂停 if (this.isSuspend) { //暂停
window.clearTimeout(this.timer) //清除定时器 window.clearTimeout(this.timer) //清除定时器
window.clearTimeout(this.updateTimer) //清除定时器
} else { //开启 } else { //开启
this.timer? window.clearTimeout(this.timer) : null //清除定时器
this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器
this.progressList.forEach((item,index)=>{ index >= this.nzCurrent? this.progressList[index] = 0 : null })
MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true) MarkWindow.instance.selectMarkNode(this.beforeEmergencyPlan.id, this.beforePlanNode.id, false, true)
this.updateProgress()
this.autoPlay() this.autoPlay()
} }
} }
@ -442,9 +493,13 @@ export class PlanComponent implements OnInit {
return return
} }
this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.timer? window.clearTimeout(this.timer) : null //清除定时器
this.nzCurrent = 0 this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器
this.publicToggleNode() this.updateProgressList().then(res=>{
!this.isSuspend? this.autoPlay() : null this.nzCurrent = 0
this.publicToggleNode().then(data=>{
!this.isSuspend? this.autoPlay() : null
})
})
} }
//切换预案节点 下一个 //切换预案节点 下一个
@ -457,17 +512,63 @@ export class PlanComponent implements OnInit {
this.message.info('目前已经是最后一个节点'); this.message.info('目前已经是最后一个节点');
return return
} }
if (this.progressList.length != this.beforeEmergencyPlan.nodes.length) {
this.updateProgressList()
}
this.timer? window.clearTimeout(this.timer) : null //清除定时器 this.timer? window.clearTimeout(this.timer) : null //清除定时器
this.updateTimer? window.clearTimeout(this.updateTimer) : null //清除定时器
this.nzCurrent = this.nzCurrent + 1 this.nzCurrent = this.nzCurrent + 1
this.publicToggleNode() this.progressList[this.nzCurrent] = 0
!this.isSuspend? this.autoPlay() : null this.publicToggleNode().then(data=>{
//!this.isSuspend? this.autoPlay() : null
})
} }
//获取进度条 flex分布
getProgressFlex(e: MarkNodeData):string {
let length: number = 0
this.beforeEmergencyPlan.nodes.forEach(item=>{
length = length + (item.getShowTime() || 1)
})
let percentage: number = (e.getShowTime() || 1) / length
return `${percentage * 100}%`
}
contingencyPlanTask: MarkData = null; //应急预案选中 设备
taskDialog: taskDialog = new taskDialog("", "", ""); //设备任务 深拷贝数据
allTaskList: any[] = []; //所有任务 List
//选中应急预案 设备 //选中应急预案 设备
selectSandTableMark(markData: MarkData, select: boolean) { selectSandTableMark(markData: MarkData, select: boolean) {
MarkWindow.instance.selectMarkData(markData, select) MarkWindow.instance.selectMarkData(markData, select)
} }
//选中应急预案 设备任务窗口
getSandTableNature(markData: MarkData) {
if (markData.property.taskType != MarkTask.None) {
this.contingencyPlanTask = markData
this.taskDialog.institution = JSON.parse(JSON.stringify(markData.property.institution || ""))
this.taskDialog.description = JSON.parse(JSON.stringify(markData.property.description || ""))
this.taskDialog.task = JSON.parse(JSON.stringify(markData.property.task || ""))
if (markData.property.taskType === MarkTask.Person) {
this.allTaskList = (new taskList()).character
} else if (markData.property.taskType === MarkTask.Car) {
this.allTaskList = (new taskList()).car
} else {
this.allTaskList = []
}
}
}
//提交 设备任务窗口表单
submitTaskForm(e) {
this.contingencyPlanTask.property.institution = e.companyName
this.contingencyPlanTask.property.description = e.description
this.contingencyPlanTask.property.task = e.taskName
MarkWindow.instance.updateProperty()
this.contingencyPlanTask = null //关闭弹窗
}
selectRightTopFast: number = 0; //当前选择功能 快捷栏 selectRightTopFast: number = 0; //当前选择功能 快捷栏
selectAdsorb: boolean = false; //吸附状态 selectAdsorb: boolean = false; //吸附状态
topLevelView: boolean = false; //顶视图状态 topLevelView: boolean = false; //顶视图状态
@ -543,6 +644,64 @@ export class PlanComponent implements OnInit {
} }
//设备任务窗口 数据类型
export class taskDialog {
institution: string; //单位
task: string; //任务
description: string; //备注
constructor(institution: string, task: string, description: string) {
this.institution = institution
this.task = task
this.description = description
}
}
//设备任务list
export class taskList {
character: any[] = [
{ taskName: "外部控火" },
{ taskName: "内部控火" },
{ taskName: "外部侦察" },
{ taskName: "内部侦察" },
{ taskName: "外部观察" },
{ taskName: "外部疏散救生" },
{ taskName: "询问知情人" },
{ taskName: "占领消控室" },
{ taskName: "水源引导" },
{ taskName: "断电气" },
{ taskName: "灭火" },
{ taskName: "掩护" },
{ taskName: "警戒" },
{ taskName: "破拆" },
{ taskName: "排烟" },
{ taskName: "照明" },
{ taskName: "通信" },
{ taskName: "待命" },
];
car: any[] = [
{ taskName: "内攻" },
{ taskName: "出枪掩护" },
{ taskName: "出枪冷却" },
{ taskName: "出枪灭火" },
{ taskName: "供水" },
{ taskName: "供泡沫" },
{ taskName: "连接消火栓" },
{ taskName: "遥控水炮冷却" },
{ taskName: "遥控水炮灭火" },
{ taskName: "抢险救援" },
{ taskName: "救人" },
{ taskName: "指挥" },
{ taskName: "排烟" },
{ taskName: "提供器材" },
{ taskName: "照明" },
{ taskName: "供电" },
{ taskName: "待命" },
]
firemonitor: any[] = [
{ taskName: "遥控水炮冷却" },
{ taskName: "遥控水炮灭火" },
{ taskName: "待命" },
]
}
//属性栏 定位 //属性栏 定位
export class naturePosition { export class naturePosition {
top: string = "1%" top: string = "1%"

5
src/app/pages/today-warning-admin/today-warning-admin.component.html

@ -1,6 +1,11 @@
<div class="warningbox" id="warningboxadmin"> <div class="warningbox" id="warningboxadmin">
<div class="title"> <div class="title">
<app-title [name]="'当日预警事件列表'"></app-title> <app-title [name]="'当日预警事件列表'"></app-title>
<div class="warningnumber">
<img src="../../../assets/images/warningnum.png" alt="">
<span class="today">今日预警</span>
<span class="num">{{totalCount}}</span>
</div>
</div> </div>
<div class="search"> <div class="search">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">

51
src/app/pages/today-warning-admin/today-warning-admin.component.scss

@ -11,6 +11,34 @@
width: 100%; width: 100%;
height: 48px; height: 48px;
margin: 16px 0; margin: 16px 0;
position: relative;
}
.warningnumber {
position: absolute;
right: 80px;
top: 9px;
display: flex;
align-items: center;
img {
width: 32px;
}
.today {
font-size: 18px;
font-family: titlefont;
color: #D0EAFF;
margin-left: 8px;
margin-right: 16px;
}
.num {
font-size: 20px;
text-shadow: 0px 0px 6px #8df;
color: white;
font-weight: 600;
}
} }
.search { .search {
@ -38,9 +66,11 @@
color: rgba(145, 204, 255, 0.95); color: rgba(145, 204, 255, 0.95);
; ;
} }
nz-tree-select{
nz-tree-select {
color: rgba(145, 204, 255, 0.95); color: rgba(145, 204, 255, 0.95);
} }
nz-time-picker { nz-time-picker {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
width: 100%; width: 100%;
@ -48,25 +78,6 @@
} }
} }
.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 { .listbox {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;

127
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html

@ -1,7 +1,7 @@
<!-- <p>get-out-of-line-details works!</p> --> <!-- <p>get-out-of-line-details works!</p> -->
<div class="box"> <div class="box">
<div class="titlebox"> <div class="titlebox">
<div class="title"> <div class="title" *ngIf="data.type == 0">
<div (click)="contentType('img')" [ngClass]="{'selected': selectedType == 'img'}"> <div (click)="contentType('img')" [ngClass]="{'selected': selectedType == 'img'}">
预警截图 预警截图
<div class="border"></div> <div class="border"></div>
@ -11,15 +11,15 @@
<div class="border"></div> <div class="border"></div>
</div> </div>
</div> </div>
<!-- <div class="title" *ngIf="data.type != 0"> <div class="title" *ngIf="data.type != 0">
<div (click)="contentType('xieyou')" [ngClass]="{'selected': selectedType == 'img'}"> <div (click)="contentType('xieyou')" [ngClass]="{'selected': selectedType == 'img'}">
卸油预警 卸油作业
<div class="border"></div> <div class="border"></div>
</div> </div>
</div> --> </div>
</div> </div>
<div class="content"> <div class="content">
<div *ngIf="selectedType == 'img'" class="imgbox"> <div *ngIf="data.type == 0 && selectedType == 'img'" class="imgbox">
<!-- <div class="imglist"> <!-- <div class="imglist">
<span class="imglisttitle">截图列表</span> <span class="imglisttitle">截图列表</span>
<div class="img"> <div class="img">
@ -30,101 +30,48 @@
<img [src]="imgUrl" alt=""> <img [src]="imgUrl" alt="">
</div> </div>
</div> </div>
<div style="width: 100%;height: 100%;" *ngIf="selectedType == 'video'" class="vediobox"> <div style="width: 100%;height: 100%;" *ngIf="data.type == 0 && selectedType == 'video'" class="vediobox">
<video controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video> <video controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video>
</div> </div>
<!-- <div *ngIf="data.type != 0" class="oilbox"> <div *ngIf="data.type != 0" class="oilbox">
<div class="imgDetailsbox"> <div class="leftbox">
<h1>执行错误</h1> <div class="lefttop">
<div class="bigimage"> <div class="title">
<img src="../../../../assets/images/bgImg.jpg" alt=""> 事前准备
</div>
<h3>步骤02</h3>
</div>
<div class="flowpathbox">
<div class="name">
卸油流程
</div>
<div class="flowpathlist">
<div class="flowpathimgbox">
<img src="../../../../assets/images/bgImg.jpg" alt="">
<span>步骤1</span>
</div>
<div class="arrowsbox">
<img src="../../../../assets/images/right.png" alt="">
</div>
<div class="flowpathimgbox">
<img src="../../../../assets/images/bgImg.jpg" alt="">
<span>步骤2</span>
</div>
<div class="arrowsbox">
<img src="../../../../assets/images/right.png" alt="">
</div>
<div class="flowpathimgbox">
<img src="../../../../assets/images/bgImg.jpg" alt="">
<span>步骤3</span>
</div>
<div class="arrowsbox">
<img src="../../../../assets/images/right.png" alt="">
</div>
<div class="flowpathimgbox">
<img src="../../../../assets/images/bgImg.jpg" alt="">
<span>步骤4</span>
</div>
<div class="flowpathimgbox">
<img src="../../../../assets/images/bgImg.jpg" alt="">
<span>步骤8</span>
</div> </div>
<div class="arrowsbox"> <div class="content">
<img src="../../../../assets/images/left.png" alt="">
</div> </div>
<div class="flowpathimgbox"> </div>
<img src="../../../../assets/images/bgImg.jpg" alt=""> <img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
<span>步骤7</span> <div class="leftbottom">
</div> <div class="title">
<div class="arrowsbox"> 事中操作
<img src="../../../../assets/images/left.png" alt="">
</div>
<div class="flowpathimgbox">
<img src="../../../../assets/images/bgImg.jpg" alt="">
<span>步骤6</span>
</div>
<div class="arrowsbox">
<img src="../../../../assets/images/left.png" alt="">
</div>
<div class="flowpathimgbox">
<img src="../../../../assets/images/bgImg.jpg" alt="">
<span>步骤5</span>
</div>
<div class="flowpathimgbox">
<img src="../../../../assets/images/bgImg.jpg" alt="">
<span>步骤9</span>
</div>
<div class="arrowsbox">
<img src="../../../../assets/images/right.png" alt="">
</div>
<div class="flowpathimgbox">
<img src="../../../../assets/images/bgImg.jpg" alt="">
<span>步骤10</span>
</div> </div>
<div class="arrowsbox"> <div class="content">
<img src="../../../../assets/images/right.png" alt="">
</div> </div>
<div class="flowpathimgbox"> </div>
<img src="../../../../assets/images/bgImg.jpg" alt=""> </div>
<span>步骤11</span> <div class="rightbox">
<div class="righttop">
<div class="imgbox">
<div class="img">
<img src="" alt="">
</div>
<span class="name">车辆进场</span>
</div> </div>
<div class="arrowsbox"> </div>
<img src="../../../../assets/images/right.png" alt=""> <img style="height: 42px;" src="../../../../assets/images/down.png" alt="">
<div class="rightbottom">
<div class="title">
卸油过程全程监测
</div> </div>
<div class="flowpathimgbox"> <div class="content">
<img src="../../../../assets/images/bgImg.jpg" alt="">
<span>步骤12</span>
</div> </div>
</div> </div>
<img class="leftimg" src="../../../../assets/images/left2.png" alt="">
<img class="rightimg" src="../../../../assets/images/right2.png" alt="">
</div> </div>
</div> --> </div>
</div> </div>
</div> </div>

146
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss

@ -4,12 +4,13 @@
color: #fff; color: #fff;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-image: linear-gradient(#003B6E, #000D21);
} }
.titlebox { .titlebox {
width: 100%; width: 100%;
height: 48px; height: 48px;
background: #041d3c; 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; display: flex;
align-items: center; align-items: center;
@ -41,7 +42,7 @@
} }
.selected { .selected {
background: linear-gradient(90deg, #1662a9 0%, #25b7d4 50%, #1662a9 100%); background: linear-gradient(90deg, rgba(35, 153, 255, 0.57) 0%, #25b7d4 50%, rgba(35, 153, 255, 0.57) 100%);
.border { .border {
background: linear-gradient(90deg, rgba(35, 217, 255, 0) 0%, #25b7d4 50%, rgba(35, 217, 255, 0) 100%); background: linear-gradient(90deg, rgba(35, 217, 255, 0) 0%, #25b7d4 50%, rgba(35, 217, 255, 0) 100%);
@ -113,111 +114,80 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
.imgDetailsbox { .title {
width: 280px; width: 100%;
height: 100%; height: 30px;
line-height: 30px;
background: rgba(35, 153, 255, 0.2);
text-align: left;
border-bottom: 1px solid rgba(54, 162, 255, 0.47);
box-sizing: border-box; box-sizing: border-box;
padding-right: 12px; padding-left: 16px;
border-right: 1px solid rgba(145, 204, 255, 0.3); color: #36A2FF;
}
.leftbox {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// justify-content: center; justify-content: space-between;
align-items: center; align-items: center;
.lefttop,
.leftbottom {
width: 840px;
height: 280px;
border: 1px solid rgba(54, 162, 255, 0.47);
display: flex;
flex-direction: column;
.bigimage {
width: 264px;
height: 264px;
border: 1px solid #FF4B65;
box-shadow: 0px 0px 12px #FF4B65;
opacity: 1;
border-radius: 0px;
// margin-top: 40px;
margin-bottom: 24px;
img {
width: 100%;
height: 100%;
}
}
h1 {
font-weight: bold;
font-size: 24px;
color: #FF4B65;
margin-bottom: 32px;
margin-top: 36%;
}
h3 { .content {
font-size: 18px; flex: 1;
font-weight: 400; background: #001d3c;
color: #FFFFFF; }
} }
} }
.flowpathbox { .rightbox {
flex: 1; flex: 1;
box-sizing: border-box; display: flex;
padding-left: 73px; flex-direction: column;
position: relative; justify-content: space-between;
align-items: center;
// border: 1px solid red; .rightbottom {
.name { width: 160px;
color: rgba(145, 204, 255, 1); height: 490px;
font-size: 15px;
margin-bottom: 12px;
}
.flowpathlist {
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
.content {
.flowpathimgbox { flex: 1;
width: 160px; background: #001d3c;
height: 200px;
display: flex;
flex-direction: column;
img {
width: 158px;
height: 158px;
border: 1px solid rgba(0, 0, 0, 0);
cursor: pointer;
}
span {
text-align: center;
margin-top: 6px;
}
} }
}
}
.imgbox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.arrowsbox { .img {
width: 40px; width: 96px;
height: 200px; height: 64px;
display: flex;
justify-content: center; img {
width: 100%;
img { height: 100%;
width: 38px;
height: 38px;
margin-top: 65px;
}
} }
} }
.leftimg { .name {
display: block; color: #FFFFFF;
position: absolute; font-size: 14px;
left: 20px;
bottom: 76px
} }
.rightimg {
display: block;
position: absolute;
right: -3px;
top: 99px;
}
} }
} }
} }

1
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts

@ -15,6 +15,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
imgUrl:string imgUrl:string
vedioUrl:string vedioUrl:string
ngOnInit(): void { ngOnInit(): void {
this.data.type = 1
this.imgUrl = this.data.violateImage this.imgUrl = this.data.violateImage
this.vedioUrl = this.data.violateVideo this.vedioUrl = this.data.violateVideo
} }

5
src/app/pages/today-warning/today-warning.component.html

@ -1,6 +1,11 @@
<div class="warningbox" id="warningbox"> <div class="warningbox" id="warningbox">
<div class="title"> <div class="title">
<app-title [name]="'当日预警事件列表'"></app-title> <app-title [name]="'当日预警事件列表'"></app-title>
<div class="warningnumber">
<img src="../../../assets/images/warningnum.png" alt="">
<span class="today">今日预警</span>
<span class="num">{{totalCount}}</span>
</div>
</div> </div>
<div class="search"> <div class="search">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"> <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">

26
src/app/pages/today-warning/today-warning.component.scss

@ -11,8 +11,34 @@
width: 100%; width: 100%;
height: 48px; height: 48px;
margin: 16px 0; margin: 16px 0;
position: relative;
} }
.warningnumber {
position: absolute;
right: 80px;
top: 9px;
display: flex;
align-items: center;
img {
width: 32px;
}
.today {
font-size: 18px;
font-family: titlefont;
color: #D0EAFF;
margin-left: 8px;
margin-right: 16px;
}
.num {
font-size: 20px;
text-shadow: 0px 0px 6px #8df;
color: white;
font-weight: 600;
}
}
.search { .search {
box-sizing: border-box; box-sizing: border-box;
padding: 0 36px; padding: 0 36px;

3
src/app/system-management/navigation/navigation.component.html

@ -2,7 +2,7 @@
<nz-layout> <nz-layout>
<nz-sider [nzWidth]='300'> <nz-sider [nzWidth]='300'>
<div class="logo"> <div class="logo">
<img src="../../../assets/images/logo.png" alt=""> <img style="width: 154px;" src="../../../assets/images/logo2.png" alt="">
</div> </div>
<div class="headPortrait"> <div class="headPortrait">
<div class="photograph"> <div class="photograph">
@ -29,6 +29,7 @@
</a> </a>
<nz-dropdown-menu #menu="nzDropdownMenu"> <nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu nzSelectable> <ul nz-menu nzSelectable>
<li nz-menu-item (click)="pages()">主页面</li>
<li nz-menu-item (click)="signOut()">退出</li> <li nz-menu-item (click)="signOut()">退出</li>
</ul> </ul>
</nz-dropdown-menu> </nz-dropdown-menu>

3
src/app/system-management/navigation/navigation.component.ts

@ -15,4 +15,7 @@ export class NavigationComponent implements OnInit {
signOut() { signOut() {
this.router.navigate(['/login']) this.router.navigate(['/login'])
} }
pages() {
this.router.navigate(['/plan'])
}
} }

9
src/app/system-management/push/push.component.ts

@ -121,5 +121,14 @@ export class PushComponent implements OnInit {
this.validateForm.controls[i].markAsDirty(); this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity(); this.validateForm.controls[i].updateValueAndValidity();
} }
if(this.validateForm.value.search){
this.list = this.list.filter((item)=>{
return item.violationType.indexOf(this.validateForm.value.search) != -1
})
}else{
this.getViolation()
}
} }
} }

8
src/app/ui/tabbar/tabbar.component.html

@ -1,6 +1,6 @@
<div class="box"> <div class="box">
<div class="boxleft"> <div class="boxleft">
<img src="../../../assets/images/logo.png" alt=""> <img style="width: 200px;" src="../../../assets/images/logo2.png" alt="">
</div> </div>
<!-- 登录信息按钮 --> <!-- 登录信息按钮 -->
<div class="boxright"> <div class="boxright">
@ -16,9 +16,9 @@
</a> </a>
<nz-dropdown-menu #menu="nzDropdownMenu"> <nz-dropdown-menu #menu="nzDropdownMenu">
<ul nz-menu nzSelectable> <ul nz-menu nzSelectable>
<li nz-menu-item (click)="navChange('/oliStationInfo')">基本信息</li> <li *ngIf="isGasStation == 'true'" nz-menu-item (click)="navChange('/oliStationInfo')">基本信息</li>
<li nz-menu-item (click)="navChange('/equipmentInfo')">器材信息</li> <li *ngIf="isGasStation == 'true'" nz-menu-item (click)="navChange('/equipmentInfo')">器材信息</li>
<!-- <li nz-menu-item (click)="navChange('/system/organization')">系统管理</li> --> <li *ngIf="userName == 'admin'" nz-menu-item (click)="navChange('/system/organization')">系统管理</li>
<li nz-menu-item (click)="signOut()">退出系统</li> <li nz-menu-item (click)="signOut()">退出系统</li>
</ul> </ul>
</nz-dropdown-menu> </nz-dropdown-menu>

13
src/app/ui/tabbar/tabbar.component.ts

@ -17,11 +17,22 @@ export class TabbarComponent implements OnInit {
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService, constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute, public token: CacheTokenService,
private cookieService: CookieService, private message: NzMessageService) { } private cookieService: CookieService, private message: NzMessageService) { }
surname: string surname: string
userName: string
isGasStation: string
ngOnInit() { ngOnInit() {
setInterval(() => { setInterval(() => {
this.getTime() this.getTime()
}, 1000); }, 1000);
this.surname = JSON.parse(sessionStorage.getItem('userdata')).name this.isGasStation = JSON.parse(sessionStorage.getItem('isGasStation'))
if(this.isGasStation == 'true'){
this.surname = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).name
this.userName = JSON.parse(sessionStorage.getItem('userdataOfgasstation')).userName
}else{
this.surname = JSON.parse(sessionStorage.getItem('userdata')).name
this.userName = JSON.parse(sessionStorage.getItem('userdata')).userName
}
} }
//获得时间 //获得时间

BIN
src/assets/images/down.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
src/assets/images/fullscreen.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/logo2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/images/navbg.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/images/right3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

896
src/assets/js/abp.js

@ -0,0 +1,896 @@
var abp = abp || {};
(function () {
/* Application paths *****************************************/
//Current application root path (including virtual directory if exists).
abp.appPath = abp.appPath || '/';
abp.pageLoadTime = new Date();
//Converts given path to absolute path using abp.appPath variable.
abp.toAbsAppPath = function (path) {
if (path.indexOf('/') == 0) {
path = path.substring(1);
}
return abp.appPath + path;
};
/* MULTITENANCY */
abp.multiTenancy = abp.multiTenancy || {};
abp.multiTenancy.isEnabled = false;
abp.multiTenancy.ignoreFeatureCheckForHostUsers = false;
abp.multiTenancy.sides = {
TENANT: 1,
HOST: 2
};
abp.multiTenancy.tenantIdCookieName = 'Abp.TenantId';
abp.multiTenancy.setTenantIdCookie = function (tenantId) {
if (tenantId) {
abp.utils.setCookieValue(
abp.multiTenancy.tenantIdCookieName,
tenantId.toString(),
new Date(new Date().getTime() + 5 * 365 * 86400000), //5 years
abp.appPath,
abp.domain
);
} else {
abp.utils.deleteCookie(abp.multiTenancy.tenantIdCookieName, abp.appPath);
}
};
abp.multiTenancy.getTenantIdCookie = function () {
var value = abp.utils.getCookieValue(abp.multiTenancy.tenantIdCookieName);
if (!value) {
return null;
}
return parseInt(value);
}
/* SESSION */
abp.session = abp.session ||
{
multiTenancySide: abp.multiTenancy.sides.HOST
};
/* LOCALIZATION ***********************************************/
//Implements Localization API that simplifies usage of localization scripts generated by Abp.
abp.localization = abp.localization || {};
abp.localization.languages = [];
abp.localization.currentLanguage = {};
abp.localization.sources = [];
abp.localization.values = {};
abp.localization.localize = function (key, sourceName) {
sourceName = sourceName || abp.localization.defaultSourceName;
var source = abp.localization.values[sourceName];
if (!source) {
abp.log.warn('Could not find localization source: ' + sourceName);
return key;
}
var value = source[key];
if (value == undefined) {
return key;
}
var copiedArguments = Array.prototype.slice.call(arguments, 0);
copiedArguments.splice(1, 1);
copiedArguments[0] = value;
return abp.utils.formatString.apply(this, copiedArguments);
};
abp.localization.getSource = function (sourceName) {
return function (key) {
var copiedArguments = Array.prototype.slice.call(arguments, 0);
copiedArguments.splice(1, 0, sourceName);
return abp.localization.localize.apply(this, copiedArguments);
};
};
abp.localization.isCurrentCulture = function (name) {
return abp.localization.currentCulture
&& abp.localization.currentCulture.name
&& abp.localization.currentCulture.name.indexOf(name) == 0;
};
abp.localization.defaultSourceName = undefined;
abp.localization.abpWeb = abp.localization.getSource('AbpWeb');
/* AUTHORIZATION **********************************************/
//Implements Authorization API that simplifies usage of authorization scripts generated by Abp.
abp.auth = abp.auth || {};
abp.auth.allPermissions = abp.auth.allPermissions || {};
abp.auth.grantedPermissions = abp.auth.grantedPermissions || {};
//Deprecated. Use abp.auth.isGranted instead.
abp.auth.hasPermission = function (permissionName) {
return abp.auth.isGranted.apply(this, arguments);
};
//Deprecated. Use abp.auth.isAnyGranted instead.
abp.auth.hasAnyOfPermissions = function () {
return abp.auth.isAnyGranted.apply(this, arguments);
};
//Deprecated. Use abp.auth.areAllGranted instead.
abp.auth.hasAllOfPermissions = function () {
return abp.auth.areAllGranted.apply(this, arguments);
};
abp.auth.isGranted = function (permissionName) {
return abp.auth.allPermissions[permissionName] != undefined &&
abp.auth.grantedPermissions[permissionName] != undefined;
};
abp.auth.isAnyGranted = function () {
if (!arguments || arguments.length <= 0) {
return true;
}
for (var i = 0; i < arguments.length; i++) {
if (abp.auth.isGranted(arguments[i])) {
return true;
}
}
return false;
};
abp.auth.areAllGranted = function () {
if (!arguments || arguments.length <= 0) {
return true;
}
for (var i = 0; i < arguments.length; i++) {
if (!abp.auth.isGranted(arguments[i])) {
return false;
}
}
return true;
};
abp.auth.tokenCookieName = 'Abp.AuthToken';
abp.auth.setToken = function (authToken, expireDate) {
abp.utils.setCookieValue(abp.auth.tokenCookieName, authToken, expireDate, abp.appPath, abp.domain);
};
abp.auth.getToken = function () {
return abp.utils.getCookieValue(abp.auth.tokenCookieName);
};
abp.auth.clearToken = function () {
abp.auth.setToken();
};
abp.auth.refreshTokenCookieName = 'Abp.AuthRefreshToken';
abp.auth.setRefreshToken = function (refreshToken, expireDate) {
abp.utils.setCookieValue(abp.auth.refreshTokenCookieName, refreshToken, expireDate, abp.appPath, abp.domain);
};
abp.auth.getRefreshToken = function () {
return abp.utils.getCookieValue(abp.auth.refreshTokenCookieName);
};
abp.auth.clearRefreshToken = function () {
abp.auth.setRefreshToken();
};
/* FEATURE SYSTEM *********************************************/
//Implements Features API that simplifies usage of feature scripts generated by Abp.
abp.features = abp.features || {};
abp.features.allFeatures = abp.features.allFeatures || {};
abp.features.get = function (name) {
return abp.features.allFeatures[name];
}
abp.features.getValue = function (name) {
var feature = abp.features.get(name);
if (feature == undefined) {
return undefined;
}
return feature.value;
}
abp.features.isEnabled = function (name) {
var value = abp.features.getValue(name);
return value == 'true' || value == 'True';
}
/* SETTINGS **************************************************/
//Implements Settings API that simplifies usage of setting scripts generated by Abp.
abp.setting = abp.setting || {};
abp.setting.values = abp.setting.values || {};
abp.setting.get = function (name) {
return abp.setting.values[name];
};
abp.setting.getBoolean = function (name) {
var value = abp.setting.get(name);
return value == 'true' || value == 'True';
};
abp.setting.getInt = function (name) {
return parseInt(abp.setting.values[name]);
};
/* REALTIME NOTIFICATIONS ************************************/
abp.notifications = abp.notifications || {};
abp.notifications.severity = {
INFO: 0,
SUCCESS: 1,
WARN: 2,
ERROR: 3,
FATAL: 4
};
abp.notifications.userNotificationState = {
UNREAD: 0,
READ: 1
};
abp.notifications.getUserNotificationStateAsString = function (userNotificationState) {
switch (userNotificationState) {
case abp.notifications.userNotificationState.READ:
return 'READ';
case abp.notifications.userNotificationState.UNREAD:
return 'UNREAD';
default:
abp.log.warn('Unknown user notification state value: ' + userNotificationState)
return '?';
}
};
abp.notifications.getUiNotifyFuncBySeverity = function (severity) {
switch (severity) {
case abp.notifications.severity.SUCCESS:
return abp.notify.success;
case abp.notifications.severity.WARN:
return abp.notify.warn;
case abp.notifications.severity.ERROR:
return abp.notify.error;
case abp.notifications.severity.FATAL:
return abp.notify.error;
case abp.notifications.severity.INFO:
default:
return abp.notify.info;
}
};
abp.notifications.messageFormatters = {};
abp.notifications.messageFormatters['Abp.Notifications.MessageNotificationData'] = function (userNotification) {
return userNotification.notification.data.message || userNotification.notification.data.properties.Message;
};
abp.notifications.messageFormatters['Abp.Notifications.LocalizableMessageNotificationData'] =
function (userNotification) {
var message = userNotification.notification.data.message ||
userNotification.notification.data.properties.Message;
var localizedMessage = abp.localization.localize(
message.name,
message.sourceName
);
if (userNotification.notification.data.properties) {
var properties = Object.keys(userNotification.notification.data.properties);
for (var i = 0; i < properties.length; i++) {
localizedMessage = localizedMessage.replace('{' + properties[i] + '}', userNotification.notification.data.properties[properties[i]]);
}
}
return localizedMessage;
};
abp.notifications.getFormattedMessageFromUserNotification = function (userNotification) {
var formatter = abp.notifications.messageFormatters[userNotification.notification.data.type];
if (!formatter) {
abp.log.warn('No message formatter defined for given data type: ' + userNotification.notification.data.type)
return '?';
}
if (!abp.utils.isFunction(formatter)) {
abp.log.warn('Message formatter should be a function! It is invalid for data type: ' + userNotification.notification.data.type)
return '?';
}
return formatter(userNotification);
}
abp.notifications.showUiNotifyForUserNotification = function (userNotification, options) {
var message = abp.notifications.getFormattedMessageFromUserNotification(userNotification);
var uiNotifyFunc = abp.notifications.getUiNotifyFuncBySeverity(userNotification.notification.severity);
uiNotifyFunc(message, undefined, options);
}
/* LOGGING ***************************************************/
//Implements Logging API that provides secure & controlled usage of console.log
abp.log = abp.log || {};
abp.log.levels = {
DEBUG: 1,
INFO: 2,
WARN: 3,
ERROR: 4,
FATAL: 5
};
abp.log.level = abp.log.levels.DEBUG;
abp.log.log = function (logObject, logLevel) {
if (!window.console || !window.console.log) {
return;
}
if (logLevel != undefined && logLevel < abp.log.level) {
return;
}
console.log(logObject);
};
abp.log.debug = function (logObject) {
abp.log.log("DEBUG: ", abp.log.levels.DEBUG);
abp.log.log(logObject, abp.log.levels.DEBUG);
};
abp.log.info = function (logObject) {
abp.log.log("INFO: ", abp.log.levels.INFO);
abp.log.log(logObject, abp.log.levels.INFO);
};
abp.log.warn = function (logObject) {
abp.log.log("WARN: ", abp.log.levels.WARN);
abp.log.log(logObject, abp.log.levels.WARN);
};
abp.log.error = function (logObject) {
abp.log.log("ERROR: ", abp.log.levels.ERROR);
abp.log.log(logObject, abp.log.levels.ERROR);
};
abp.log.fatal = function (logObject) {
abp.log.log("FATAL: ", abp.log.levels.FATAL);
abp.log.log(logObject, abp.log.levels.FATAL);
};
/* NOTIFICATION *********************************************/
//Defines Notification API, not implements it
abp.notify = abp.notify || {};
abp.notify.success = function (message, title, options) {
abp.log.warn('abp.notify.success is not implemented!');
};
abp.notify.info = function (message, title, options) {
abp.log.warn('abp.notify.info is not implemented!');
};
abp.notify.warn = function (message, title, options) {
abp.log.warn('abp.notify.warn is not implemented!');
};
abp.notify.error = function (message, title, options) {
abp.log.warn('abp.notify.error is not implemented!');
};
/* MESSAGE **************************************************/
//Defines Message API, not implements it
abp.message = abp.message || {};
var showMessage = function (message, title, options) {
alert((title || '') + ' ' + message);
};
abp.message.info = function (message, title, options) {
abp.log.warn('abp.message.info is not implemented!');
return showMessage(message, title, options);
};
abp.message.success = function (message, title, options) {
abp.log.warn('abp.message.success is not implemented!');
return showMessage(message, title, options);
};
abp.message.warn = function (message, title, options) {
abp.log.warn('abp.message.warn is not implemented!');
return showMessage(message, title, options);
};
abp.message.error = function (message, title, options) {
abp.log.warn('abp.message.error is not implemented!');
return showMessage(message, title, options);
};
abp.message.confirm = function (message, title, callback, options) {
abp.log.warn('abp.message.confirm is not implemented!');
var result = confirm(message);
callback && callback(result);
};
/* UI *******************************************************/
abp.ui = abp.ui || {};
/* UI BLOCK */
//Defines UI Block API, not implements it
abp.ui.block = function (elm) {
abp.log.warn('abp.ui.block is not implemented!');
};
abp.ui.unblock = function (elm) {
abp.log.warn('abp.ui.unblock is not implemented!');
};
/* UI BUSY */
//Defines UI Busy API, not implements it
abp.ui.setBusy = function (elm, optionsOrPromise) {
abp.log.warn('abp.ui.setBusy is not implemented!');
};
abp.ui.clearBusy = function (elm) {
abp.log.warn('abp.ui.clearBusy is not implemented!');
};
/* SIMPLE EVENT BUS *****************************************/
abp.event = (function () {
var _callbacks = {};
var on = function (eventName, callback) {
if (!_callbacks[eventName]) {
_callbacks[eventName] = [];
}
_callbacks[eventName].push(callback);
};
var off = function (eventName, callback) {
var callbacks = _callbacks[eventName];
if (!callbacks) {
return;
}
var index = -1;
for (var i = 0; i < callbacks.length; i++) {
if (callbacks[i] === callback) {
index = i;
break;
}
}
if (index < 0) {
return;
}
_callbacks[eventName].splice(index, 1);
};
var trigger = function (eventName) {
var callbacks = _callbacks[eventName];
if (!callbacks || !callbacks.length) {
return;
}
var args = Array.prototype.slice.call(arguments, 1);
for (var i = 0; i < callbacks.length; i++) {
callbacks[i].apply(this, args);
}
};
// Public interface ///////////////////////////////////////////////////
return {
on: on,
off: off,
trigger: trigger
};
})();
/* UTILS ***************************************************/
abp.utils = abp.utils || {};
/* Creates a name namespace.
* Example:
* var taskService = abp.utils.createNamespace(abp, 'services.task');
* taskService will be equal to abp.services.task
* first argument (root) must be defined first
************************************************************/
abp.utils.createNamespace = function (root, ns) {
var parts = ns.split('.');
for (var i = 0; i < parts.length; i++) {
if (typeof root[parts[i]] == 'undefined') {
root[parts[i]] = {};
}
root = root[parts[i]];
}
return root;
};
/* Find and replaces a string (search) to another string (replacement) in
* given string (str).
* Example:
* abp.utils.replaceAll('This is a test string', 'is', 'X') = 'ThX X a test string'
************************************************************/
abp.utils.replaceAll = function (str, search, replacement) {
var fix = search.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
return str.replace(new RegExp(fix, 'g'), replacement);
};
/* Formats a string just like string.format in C#.
* Example:
* abp.utils.formatString('Hello {0}','Tuana') = 'Hello Tuana'
************************************************************/
abp.utils.formatString = function () {
if (arguments.length < 1) {
return null;
}
var str = arguments[0];
for (var i = 1; i < arguments.length; i++) {
var placeHolder = '{' + (i - 1) + '}';
str = abp.utils.replaceAll(str, placeHolder, arguments[i]);
}
return str;
};
abp.utils.toPascalCase = function (str) {
if (!str || !str.length) {
return str;
}
if (str.length === 1) {
return str.charAt(0).toUpperCase();
}
return str.charAt(0).toUpperCase() + str.substr(1);
}
abp.utils.toCamelCase = function (str) {
if (!str || !str.length) {
return str;
}
if (str.length === 1) {
return str.charAt(0).toLowerCase();
}
return str.charAt(0).toLowerCase() + str.substr(1);
}
abp.utils.truncateString = function (str, maxLength) {
if (!str || !str.length || str.length <= maxLength) {
return str;
}
return str.substr(0, maxLength);
};
abp.utils.truncateStringWithPostfix = function (str, maxLength, postfix) {
postfix = postfix || '...';
if (!str || !str.length || str.length <= maxLength) {
return str;
}
if (maxLength <= postfix.length) {
return postfix.substr(0, maxLength);
}
return str.substr(0, maxLength - postfix.length) + postfix;
};
abp.utils.isFunction = function (obj) {
return !!(obj && obj.constructor && obj.call && obj.apply);
};
/**
* parameterInfos should be an array of { name, value } objects
* where name is query string parameter name and value is it's value.
* includeQuestionMark is true by default.
*/
abp.utils.buildQueryString = function (parameterInfos, includeQuestionMark) {
if (includeQuestionMark === undefined) {
includeQuestionMark = true;
}
var qs = '';
function addSeperator() {
if (!qs.length) {
if (includeQuestionMark) {
qs = qs + '?';
}
} else {
qs = qs + '&';
}
}
for (var i = 0; i < parameterInfos.length; ++i) {
var parameterInfo = parameterInfos[i];
if (parameterInfo.value === undefined) {
continue;
}
if (parameterInfo.value === null) {
parameterInfo.value = '';
}
addSeperator();
if (parameterInfo.value.toJSON && typeof parameterInfo.value.toJSON === "function") {
qs = qs + parameterInfo.name + '=' + encodeURIComponent(parameterInfo.value.toJSON());
} else if (Array.isArray(parameterInfo.value) && parameterInfo.value.length) {
for (var j = 0; j < parameterInfo.value.length; j++) {
if (j > 0) {
addSeperator();
}
qs = qs + parameterInfo.name + '[' + j + ']=' + encodeURIComponent(parameterInfo.value[j]);
}
} else {
qs = qs + parameterInfo.name + '=' + encodeURIComponent(parameterInfo.value);
}
}
return qs;
}
/**
* Sets a cookie value for given key.
* This is a simple implementation created to be used by ABP.
* Please use a complete cookie library if you need.
* @param {string} key
* @param {string} value
* @param {Date} expireDate (optional). If not specified the cookie will expire at the end of session.
* @param {string} path (optional)
*/
abp.utils.setCookieValue = function (key, value, expireDate, path, domain) {
var cookieValue = encodeURIComponent(key) + '=';
if (value) {
cookieValue = cookieValue + encodeURIComponent(value);
}
if (expireDate) {
cookieValue = cookieValue + "; expires=" + expireDate.toUTCString();
}
if (path) {
cookieValue = cookieValue + "; path=" + path;
}
if (domain) {
cookieValue = cookieValue + "; domain=" + domain;
}
document.cookie = cookieValue;
};
/**
* Gets a cookie with given key.
* This is a simple implementation created to be used by ABP.
* Please use a complete cookie library if you need.
* @param {string} key
* @returns {string} Cookie value or null
*/
abp.utils.getCookieValue = function (key) {
var equalities = document.cookie.split('; ');
for (var i = 0; i < equalities.length; i++) {
if (!equalities[i]) {
continue;
}
var splitted = equalities[i].split('=');
if (splitted.length != 2) {
continue;
}
if (decodeURIComponent(splitted[0]) === key) {
return decodeURIComponent(splitted[1] || '');
}
}
return null;
};
/**
* Deletes cookie for given key.
* This is a simple implementation created to be used by ABP.
* Please use a complete cookie library if you need.
* @param {string} key
* @param {string} path (optional)
*/
abp.utils.deleteCookie = function (key, path) {
var cookieValue = encodeURIComponent(key) + '=';
cookieValue = cookieValue + "; expires=" + (new Date(new Date().getTime() - 86400000)).toUTCString();
if (path) {
cookieValue = cookieValue + "; path=" + path;
}
document.cookie = cookieValue;
}
/**
* Gets the domain of given url
* @param {string} url
* @returns {string}
*/
abp.utils.getDomain = function (url) {
var domainRegex = /(https?:){0,1}\/\/((?:[\w\d-]+\.)+[\w\d]{2,})/i;
var matches = domainRegex.exec(url);
return (matches && matches[2]) ? matches[2] : '';
}
/* TIMING *****************************************/
abp.timing = abp.timing || {};
abp.timing.utcClockProvider = (function () {
var toUtc = function (date) {
return Date.UTC(
date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), date.getUTCMilliseconds()
);
}
var now = function () {
return toUtc(new Date());
};
var normalize = function (date) {
if (!date) {
return date;
}
return new Date(toUtc(date));
};
// Public interface ///////////////////////////////////////////////////
return {
now: now,
normalize: normalize,
supportsMultipleTimezone: true
};
})();
abp.timing.localClockProvider = (function () {
var toLocal = function (date) {
return new Date(
date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()
);
}
var now = function () {
return toLocal(new Date());
}
var normalize = function (date) {
if (!date) {
return date;
}
return toLocal(date);
}
// Public interface ///////////////////////////////////////////////////
return {
now: now,
normalize: normalize,
supportsMultipleTimezone: false
};
})();
abp.timing.unspecifiedClockProvider = (function () {
var now = function () {
return new Date();
}
var normalize = function (date) {
return date;
}
// Public interface ///////////////////////////////////////////////////
return {
now: now,
normalize: normalize,
supportsMultipleTimezone: false
};
})();
abp.timing.convertToUserTimezone = function (date) {
var localTime = date.getTime();
var utcTime = localTime + (date.getTimezoneOffset() * 60000);
var targetTime = parseInt(utcTime) + parseInt(abp.timing.timeZoneInfo.windows.currentUtcOffsetInMilliseconds);
return new Date(targetTime);
};
/* CLOCK *****************************************/
abp.clock = abp.clock || {};
abp.clock.now = function () {
if (abp.clock.provider) {
return abp.clock.provider.now();
}
return new Date();
}
abp.clock.normalize = function (date) {
if (abp.clock.provider) {
return abp.clock.provider.normalize(date);
}
return date;
}
abp.clock.provider = abp.timing.unspecifiedClockProvider;
/* SECURITY ***************************************/
abp.security = abp.security || {};
abp.security.antiForgery = abp.security.antiForgery || {};
abp.security.antiForgery.tokenCookieName = 'XSRF-TOKEN';
abp.security.antiForgery.tokenHeaderName = 'X-XSRF-TOKEN';
abp.security.antiForgery.getToken = function () {
return abp.utils.getCookieValue(abp.security.antiForgery.tokenCookieName);
};
abp.security.antiForgery.shouldSendToken = function (settings) {
if (settings.crossDomain === undefined || settings.crossDomain === null) {
return abp.utils.getDomain(location.href) === abp.utils.getDomain(settings.url);
}
return !settings.crossDomain;
};
})();

135
src/assets/js/abp.signalr-client.js

@ -0,0 +1,135 @@
var abp = abp || {};
(function () {
// Check if SignalR is defined
if (!signalR) {
return;
}
// Create namespaces
abp.signalr = abp.signalr || {};
abp.signalr.hubs = abp.signalr.hubs || {};
abp.signalr.reconnectTime = abp.signalr.reconnectTime || 5000;
abp.signalr.maxTries = abp.signalr.maxTries || 8;
abp.signalr.increaseReconnectTime = abp.signalr.increaseReconnectTime || function (time) {
return time * 2;
};
// Configure the connection for abp.signalr.hubs.common
function configureConnection(connection) {
// Set the common hub
abp.signalr.hubs.common = connection;
let tries = 1;
let reconnectTime = abp.signalr.reconnectTime;
// Reconnect loop
function tryReconnect() {
if (tries <= abp.signalr.maxTries) {
connection.start()
.then(function () {
reconnectTime = abp.signalr.reconnectTime;
tries = 1;
console.log('Reconnected to SignalR server!');
abp.event.trigger('abp.signalr.reconnected');
}).catch(function () {
tries += 1;
reconnectTime = abp.signalr.increaseReconnectTime(reconnectTime);
setTimeout(function () {
tryReconnect()
},
reconnectTime
);
});
}
}
// Reconnect if hub disconnects
connection.onclose(function (e) {
if (e) {
abp.log.debug('Connection closed with error: ' + e);
} else {
abp.log.debug('Disconnected');
}
if (!abp.signalr.autoReconnect) {
return;
}
abp.event.trigger('abp.signalr.disconnected');
tryReconnect();
});
// Register to get notifications
connection.on('getNotification', function (notification) {
abp.event.trigger('abp.notifications.received', notification);
});
}
// Connect to the server for abp.signalr.hubs.common
function connect() {
var url = abp.signalr.url || (abp.appPath + 'signalr');
// Start the connection
startConnection(url, configureConnection)
.then(function (connection) {
abp.log.debug('Connected to SignalR server!'); //TODO: Remove log
abp.event.trigger('abp.signalr.connected');
// Call the Register method on the hub
connection.invoke('register').then(function () {
abp.log.debug('Registered to the SignalR server!'); //TODO: Remove log
});
})
.catch(function (error) {
abp.log.debug(error.message);
});
}
// Starts a connection with transport fallback - if the connection cannot be started using
// the webSockets transport the function will fallback to the serverSentEvents transport and
// if this does not work it will try longPolling. If the connection cannot be started using
// any of the available transports the function will return a rejected Promise.
function startConnection(url, configureConnection) {
if (abp.signalr.remoteServiceBaseUrl) {
url = abp.signalr.remoteServiceBaseUrl + url;
}
// Add query string: https://github.com/aspnet/SignalR/issues/680
if (abp.signalr.qs) {
url += (url.indexOf('?') == -1 ? '?' : '&') + abp.signalr.qs;
}
return function start(transport) {
abp.log.debug('Starting connection using ' + signalR.HttpTransportType[transport] + ' transport');
var connection = new signalR.HubConnectionBuilder()
.withUrl(url, transport)
.build();
if (configureConnection && typeof configureConnection === 'function') {
configureConnection(connection);
}
return connection.start()
.then(function () {
return connection;
})
.catch(function (error) {
abp.log.debug('Cannot start the connection using ' + signalR.HttpTransportType[transport] + ' transport. ' + error.message);
if (transport !== signalR.HttpTransportType.LongPolling) {
return start(transport + 1);
}
return Promise.reject(error);
});
}(signalR.HttpTransportType.WebSockets);
}
abp.signalr.autoConnect = abp.signalr.autoConnect === undefined ? true : abp.signalr.autoConnect;
abp.signalr.autoReconnect = abp.signalr.autoReconnect === undefined ? true : abp.signalr.autoReconnect;
abp.signalr.connect = abp.signalr.connect || connect;
abp.signalr.startConnection = abp.signalr.startConnection || startConnection;
if (abp.signalr.autoConnect && !abp.signalr.hubs.common) {
abp.signalr.connect();
}
})();

3741
src/assets/js/signalr.js

File diff suppressed because it is too large Load Diff

7
src/index.html

@ -2,7 +2,7 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>石化加油站</title> <title>化石油智能安全管理系统</title>
<base href="/"> <base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
@ -10,5 +10,8 @@
<body> <body>
<app-root></app-root> <app-root></app-root>
</body> </body>
<script src="./assets/js/signalr.js"></script>
<script src="./assets/js/abp.js"></script>
<!-- <script src="./assets/js/abp.signalr-client.js"></script> -->
<!-- <script src="../../Sinopec-Anxin/node_modules/angular-load/angular-load.js"></script> -->
</html> </html>

10
src/styles.scss

@ -115,6 +115,16 @@ h1 {
box-shadow: 0px 0px 6px #2399FF; box-shadow: 0px 0px 6px #2399FF;
li { color: #fff; } li { color: #fff; }
} }
//任务弹窗
.taskDialog{
.ant-modal-header,.ant-modal-content { background: radial-gradient(circle, #004988 0%, #00122D 100%); }
.ant-modal-header,.ant-modal-footer { border: none; }
.ant-modal-title,.ant-form-item-label > label,.ant-input { color: #C4E2FC; }
.ant-modal-footer .ant-btn:first-child { color: #C4E2FC; background: #000D21; border: 1px solid #C4E2FC; }
.ant-modal-footer .ant-btn:last-child { color: #C4E2FC; background: rgba(0, 129, 255, 0.6); border: 1px solid #36A2FF; }
.ant-input { background: rgba(145, 204, 255, 0.41); border: 1px solid #91CCFF; }
textarea { resize: none; outline: none; }
}
#threeDimensional { #threeDimensional {
.ant-tree{ color: #C4E2FC; } //tree .ant-tree{ color: #C4E2FC; } //tree
.ant-tree,.ant-tree-node-content-wrapper:hover,.ant-tree-node-content-wrapper.ant-tree-node-selected { background-color: transparent; } //tree .ant-tree,.ant-tree-node-content-wrapper:hover,.ant-tree-node-content-wrapper.ant-tree-node-selected { background-color: transparent; } //tree

Loading…
Cancel
Save