Compare commits
35 Commits
Author | SHA1 | Date |
---|---|---|
|
35d3a8a67c | 1 month ago |
|
a6888a1b63 | 4 months ago |
|
e3a63bdab9 | 5 months ago |
|
bc21575204 | 5 months ago |
|
2dd4ac1ff2 | 5 months ago |
|
9df04beb8b | 5 months ago |
|
e6969318e9 | 5 months ago |
|
6d868d46d8 | 5 months ago |
|
647cac21c2 | 5 months ago |
|
8d0f3c1ed1 | 6 months ago |
|
9070556c7c | 6 months ago |
|
eca559d138 | 6 months ago |
|
d5dd9ec2b5 | 6 months ago |
|
15340ce75e | 6 months ago |
|
9321f29ad1 | 7 months ago |
|
697f701d5f | 7 months ago |
|
9747d866ea | 7 months ago |
|
0779b377a4 | 7 months ago |
|
c2237a44d6 | 7 months ago |
|
ebc4346ef0 | 7 months ago |
|
82a47e7b52 | 7 months ago |
|
7500b9da8f | 7 months ago |
|
462733e9ca | 7 months ago |
|
a599173713 | 7 months ago |
|
3734779800 | 7 months ago |
|
4a41bfafc0 | 7 months ago |
|
3bfc6a47cb | 8 months ago |
|
eef70064e8 | 9 months ago |
|
9ca4e6a7d8 | 10 months ago |
|
cfb5c9c13a | 12 months ago |
|
065b41de17 | 1 year ago |
|
1722ad6151 | 1 year ago |
|
59df72222f | 1 year ago |
|
f8cebca2c8 | 1 year ago |
|
b7a1357c9b | 1 year ago |
87 changed files with 26232 additions and 3302 deletions
@ -1,16 +1,22 @@ |
|||||||
{ |
{ |
||||||
"/api": { |
"/api": { |
||||||
"target": "http://121.36.37.70:8906/", |
"target": "https://znaq.sinochemoilmarketing.com/", |
||||||
"测试1": "http://121.36.37.70:8906/", |
"测试1": "http://121.36.37.70:8906/", |
||||||
"测试2": "https://znaq.sinochemoilmarketing.com/", |
"测试2": "https://znaq.sinochemoilmarketing.com/", |
||||||
"测试3": "https://gas.anxincloud.cn/", |
"测试3": "https://gas.anxincloud.cn/", |
||||||
|
"中台": "http://10.156.134.54:8906/", |
||||||
"secure": false, |
"secure": false, |
||||||
"changeOrigin": true |
"changeOrigin": true |
||||||
}, |
}, |
||||||
"/signalr": { |
"/signalr": { |
||||||
"target": "http://121.36.37.70:8906/", |
"target": "https://znaq.sinochemoilmarketing.com/", |
||||||
"secure": false, |
"secure": false, |
||||||
"ws": true, |
"ws": true, |
||||||
"logLevel": "debug" |
"logLevel": "debug" |
||||||
|
}, |
||||||
|
"/sagframe-portal": { |
||||||
|
"target": "https://uat-uomsp.sinochemoilmarketing.com/", |
||||||
|
"secure": false, |
||||||
|
"changeOrigin": true |
||||||
} |
} |
||||||
} |
} |
||||||
|
@ -1,35 +1,52 @@ |
|||||||
import { NgModule } from '@angular/core'; |
import { NgModule } from "@angular/core"; |
||||||
import { Routes, RouterModule } from '@angular/router'; |
import { Routes, RouterModule } from "@angular/router"; |
||||||
import { LoginComponent } from './pages/login/login.component'; |
import { LoginComponent } from "./pages/login/login.component"; |
||||||
import { RegisterComponent } from './pages/register/register.component'; |
import { RegisterComponent } from "./pages/register/register.component"; |
||||||
|
|
||||||
//路由守卫
|
//路由守卫
|
||||||
import { AuthGuard } from './auth.guard' |
import { AuthGuard } from "./auth.guard"; |
||||||
import { HomeComponent } from './pages/home/home.component'; |
import { HomeComponent } from "./pages/home/home.component"; |
||||||
import { NavigationComponent } from './system-management/navigation/navigation.component'; |
import { NavigationComponent } from "./system-management/navigation/navigation.component"; |
||||||
import { HomePageNologinComponent } from './pages/home-page-nologin/home-page-nologin.component'; |
import { HomePageNologinComponent } from "./pages/home-page-nologin/home-page-nologin.component"; |
||||||
|
import { SingleloginComponent } from "./pages/singlelogin/singlelogin.component"; |
||||||
|
|
||||||
|
|
||||||
const routes: Routes = [ |
const routes: Routes = [ |
||||||
{ path: '', redirectTo: 'login', pathMatch: 'full' }, |
{ path: '', redirectTo: 'singlelogin', pathMatch: 'full' }, |
||||||
{ path: 'login', component: LoginComponent }, //登录页
|
{ path: "singlelogin", component: SingleloginComponent }, //单点登录页
|
||||||
{ path: 'register', component: RegisterComponent }, //注册页
|
{ path: "login", component: LoginComponent }, //登录页
|
||||||
|
|
||||||
|
{ path: "register", component: RegisterComponent }, //注册页
|
||||||
// { path: 'homepagenologin', component: HomePageNologinComponent }, //注册页
|
// { path: 'homepagenologin', component: HomePageNologinComponent }, //注册页
|
||||||
{ |
{ |
||||||
path: '', component: HomeComponent, canActivate: [AuthGuard], children: [ |
path: "", |
||||||
{ path: '', loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule) } |
component: HomeComponent, |
||||||
]
|
canActivate: [AuthGuard], |
||||||
|
children: [ |
||||||
|
{ |
||||||
|
path: "", |
||||||
|
loadChildren: () => |
||||||
|
import("./pages/pages.module").then((m) => m.PagesModule), |
||||||
|
}, |
||||||
|
], |
||||||
}, //首页
|
}, //首页
|
||||||
{ |
{ |
||||||
path: '', component: NavigationComponent, canActivate: [AuthGuard], children: [ |
path: "", |
||||||
{ path: 'system', loadChildren: () => import('./system-management/system-management.module').then(m => m.SystemManagementModule) } |
component: NavigationComponent, |
||||||
] |
canActivate: [AuthGuard], |
||||||
}//系统管理
|
children: [ |
||||||
|
{ |
||||||
|
path: "system", |
||||||
|
loadChildren: () => |
||||||
|
import("./system-management/system-management.module").then( |
||||||
|
(m) => m.SystemManagementModule |
||||||
|
), |
||||||
|
}, |
||||||
|
], |
||||||
|
}, //系统管理
|
||||||
]; |
]; |
||||||
|
|
||||||
@NgModule({ |
@NgModule({ |
||||||
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })], |
imports: [RouterModule.forRoot(routes, { relativeLinkResolution: "legacy" })], |
||||||
exports: [RouterModule] |
exports: [RouterModule], |
||||||
}) |
}) |
||||||
export class AppRoutingModule {} |
export class AppRoutingModule {} |
||||||
|
@ -1,35 +1,100 @@ |
|||||||
import { Component, OnInit, Inject } from '@angular/core'; |
import { HttpClient } from "@angular/common/http"; |
||||||
import { Injectable } from '@angular/core'; |
import { Component, OnInit, Inject } from "@angular/core"; |
||||||
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; |
import { Injectable } from "@angular/core"; |
||||||
|
import { |
||||||
|
CanActivate, |
||||||
|
ActivatedRouteSnapshot, |
||||||
|
RouterStateSnapshot, |
||||||
|
Router, |
||||||
|
} from "@angular/router"; |
||||||
|
|
||||||
@Injectable({ |
@Injectable({ |
||||||
providedIn: 'root' |
providedIn: "root", |
||||||
}) |
}) |
||||||
export class AuthGuard implements CanActivate { |
export class AuthGuard implements CanActivate { |
||||||
|
constructor(private http: HttpClient, private router: Router) {} |
||||||
|
|
||||||
constructor(private router: Router) { |
// 路由守卫
|
||||||
|
async canActivate( |
||||||
|
next: ActivatedRouteSnapshot, |
||||||
|
state: RouterStateSnapshot |
||||||
|
): Promise<boolean> { |
||||||
|
console.log("路由守卫", next); |
||||||
|
|
||||||
|
if ( |
||||||
|
next.queryParams.singleSignOn && |
||||||
|
next.queryParams.singleSignOn === "true" |
||||||
|
) { |
||||||
|
sessionStorage.setItem("singleSignOn", "true"); |
||||||
|
await this.autoLogin(); |
||||||
} |
} |
||||||
|
|
||||||
// 路由守卫
|
|
||||||
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { |
|
||||||
// console.log('路由守卫',next.data)
|
|
||||||
// if(next.data.permission == 'xxxx'){
|
|
||||||
// return true;
|
|
||||||
// }
|
|
||||||
return this.checkLogin(); |
return this.checkLogin(); |
||||||
} |
} |
||||||
|
|
||||||
checkLogin(): boolean { |
checkLogin(): boolean { |
||||||
// 判断本地有没有token
|
// 判断本地有没有token
|
||||||
const token = sessionStorage.getItem('token'); |
const token = sessionStorage.getItem("token"); |
||||||
|
|
||||||
// 如果有token,允许访问
|
// 如果有token,允许访问
|
||||||
if (token) { return true; } |
if (token) { |
||||||
|
return true; |
||||||
|
} |
||||||
|
|
||||||
//如果没有token,跳转登录页
|
//如果没有token,跳转登录页
|
||||||
this.router.navigate(['/login']); |
// this.router.navigate(["/login"]);
|
||||||
|
|
||||||
return false; |
return false; |
||||||
} |
} |
||||||
|
|
||||||
|
autoLogin() { |
||||||
|
return new Promise<void>((resolve, reject) => { |
||||||
|
this.http |
||||||
|
.post("/api/TokenAuth/Authenticate", { |
||||||
|
userNameOrEmailAddress: "admin", |
||||||
|
password: "Admin119119119", |
||||||
|
}) |
||||||
|
.subscribe( |
||||||
|
(data: any) => { |
||||||
|
sessionStorage.setItem("token", data.result.accessToken); |
||||||
|
sessionStorage.setItem( |
||||||
|
"encryptedAccessToken", |
||||||
|
data.result.encryptedAccessToken |
||||||
|
); |
||||||
|
this.http |
||||||
|
.get("/api/services/app/Session/GetCurrentLoginInformations") |
||||||
|
.subscribe( |
||||||
|
async (data: any) => { |
||||||
|
console.log("GetCurrentLoginInformations", data.result); |
||||||
|
sessionStorage.setItem( |
||||||
|
"userdata", |
||||||
|
JSON.stringify(data.result.user) |
||||||
|
); |
||||||
|
sessionStorage.setItem( |
||||||
|
"userdataOfgasstation", |
||||||
|
JSON.stringify(data.result.user) |
||||||
|
); |
||||||
|
sessionStorage.setItem( |
||||||
|
"isDefaultPassword", |
||||||
|
JSON.stringify(data.result.user.isDefaultPassword) |
||||||
|
); |
||||||
|
sessionStorage.setItem( |
||||||
|
"isPasswordExpired", |
||||||
|
JSON.stringify(data.result.user.isPasswordExpired) |
||||||
|
); |
||||||
|
sessionStorage.setItem("isGasStation", "false"); |
||||||
|
resolve(); |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
reject(); |
||||||
|
} |
||||||
|
); |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
reject(); |
||||||
|
} |
||||||
|
); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
} |
} |
||||||
|
@ -0,0 +1,328 @@ |
|||||||
|
<div class="homepagebox"> |
||||||
|
|
||||||
|
<div class="informbox"> |
||||||
|
<div class="warningnumber"> |
||||||
|
<img src="../../../assets/images/warningnum.png" alt=""> |
||||||
|
<span class="num">{{totalCount}}</span> |
||||||
|
<span class="today" (click)="getUnreadNotification()">今日预警</span> |
||||||
|
</div> |
||||||
|
<div class="inform"> |
||||||
|
<div class="infologo"> |
||||||
|
<img src="../../../assets/images/inform.png" alt=""> |
||||||
|
通知 |
||||||
|
</div> |
||||||
|
<!-- 循环轮播信息 --> |
||||||
|
<div id="container" (mouseenter)="mouseEnter()" (mouseleave)="mouseleave()"> |
||||||
|
<div id="list-wrapper" style="top: 0"> |
||||||
|
<ul class="notice-list" id="notice-list"> |
||||||
|
<li class="info" *ngFor="let item of unreadMessageList;let key = index"> |
||||||
|
<div class="infoitem"> |
||||||
|
<img src="../../../assets/images/warning1.png" alt=""> |
||||||
|
您有一条新的预警信息!{{item.notification.data.violationName}} |
||||||
|
</div> |
||||||
|
<div class="btn"> |
||||||
|
<span (click)="look(item)">查看</span> |
||||||
|
<span (click)="ignore(key)">忽略</span> |
||||||
|
</div> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
<ul class="notice-list" id="notice-list-2"> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="centerbox"> |
||||||
|
<div class="title"> |
||||||
|
<app-title [name]="'统计分析'"></app-title> |
||||||
|
</div> |
||||||
|
<div class="content_box"> |
||||||
|
<div class="leftitem leftitemlimit"> |
||||||
|
<div class="eventechartpieAll" id="eventechartpieAll"> |
||||||
|
</div> |
||||||
|
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||||
|
</div> |
||||||
|
<div class="leftitem ranking"> |
||||||
|
<span class="itemname">油站近30天事件排名</span> |
||||||
|
<div class="box eventbox"> |
||||||
|
<div class="eventboxitem" *ngFor="let item of HomeAggregatioData.violationNameAgg;let key = index"> |
||||||
|
<div class="eventname" [title]="item.eventSystemName"> |
||||||
|
<div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||||
|
<ng-container *ngIf="key != 9; else elseTemplate"> |
||||||
|
{{'0' + (key + 1)}} |
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate> |
||||||
|
{{key + 1}} |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
{{item.eventSystemName}} |
||||||
|
</div> |
||||||
|
<div class="progressbox"> |
||||||
|
<div class="progress"> |
||||||
|
<div class="colorbar" |
||||||
|
[ngStyle]="width(item.count,HomeAggregatioData.violationNameAgg[0].count)" |
||||||
|
[ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style="margin-left: 6px;"> |
||||||
|
{{item.count}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||||
|
</div> |
||||||
|
<div class="leftitem ranking" style="margin-left: 50px;"> |
||||||
|
<span class="itemname">近30天油站排名</span> |
||||||
|
<div class="box eventbox"> |
||||||
|
<div class="eventboxitem" *ngFor="let item of HomeAggregatioData.stationAgg;let key = index"> |
||||||
|
<div class="eventname" [title]="item.companyName + item.stationName"> |
||||||
|
<div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||||
|
<ng-container *ngIf="key != 9; else elseTemplate"> |
||||||
|
{{'0' + (key + 1)}} |
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate> |
||||||
|
{{key + 1}} |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
{{item.companyName}} {{item.stationName}} |
||||||
|
</div> |
||||||
|
<div class="progressbox"> |
||||||
|
<div class="progress"> |
||||||
|
<div class="colorbar" |
||||||
|
[ngStyle]="width(item.count,HomeAggregatioData.stationAgg[0].count)" |
||||||
|
[ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style="margin-left: 6px;"> |
||||||
|
{{item.count}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<nz-spin *ngIf="isSpin" nzSimple class="nzspin"></nz-spin> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="rightitem"> |
||||||
|
<div class="numlistbox"> |
||||||
|
<img src="../../../assets/images/stationNum.png" alt=""> |
||||||
|
<div class="content"> |
||||||
|
<span class="lightspan lightspan1">{{HomeAggregatioData.dev.stationCount}}</span> |
||||||
|
<span>接入油站(个)</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="numlistbox"> |
||||||
|
<img src="../../../assets/images/modelNum.png" alt=""> |
||||||
|
<div class="content"> |
||||||
|
<span class="lightspan lightspan2">{{HomeAggregatioData.dev.violationCount}}</span> |
||||||
|
<span>预警分析模型(个)</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="numlistbox"> |
||||||
|
<img src="../../../assets/images/cameraNum.png" alt=""> |
||||||
|
<div class="content"> |
||||||
|
<span class="lightspan lightspan3">{{HomeAggregatioData.dev.cameraCount}}</span> |
||||||
|
<span>摄像头(个)</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="angle-border left-top-border"></div> |
||||||
|
<div class="angle-border right-top-border"></div> |
||||||
|
<div class="angle-border left-bottom-border"></div> |
||||||
|
<div class="angle-border right-bottom-border"></div> |
||||||
|
</div> |
||||||
|
<div class="content_box"> |
||||||
|
<div class="leftitem leftitemlimit"> |
||||||
|
<div class="eventechartpieAll" id="eventechartpieAll_YK"> |
||||||
|
</div> |
||||||
|
<nz-spin *ngIf="isSpin_YK" nzSimple class="nzspin"></nz-spin> |
||||||
|
</div> |
||||||
|
<div class="leftitem ranking"> |
||||||
|
<span class="itemname">油库近30天事件排名</span> |
||||||
|
<div class="box eventbox"> |
||||||
|
<div class="eventboxitem" |
||||||
|
*ngFor="let item of HomeAggregatioData_YK.violationNameAgg;let key = index"> |
||||||
|
<div class="eventname" [title]="item.eventSystemName"> |
||||||
|
<div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||||
|
<ng-container *ngIf="key != 9; else elseTemplate"> |
||||||
|
{{'0' + (key + 1)}} |
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate> |
||||||
|
{{key + 1}} |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
{{item.eventSystemName}} |
||||||
|
</div> |
||||||
|
<div class="progressbox"> |
||||||
|
<div class="progress"> |
||||||
|
<div class="colorbar" |
||||||
|
[ngStyle]="width(item.count,HomeAggregatioData_YK.violationNameAgg[0].count)" |
||||||
|
[ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style="margin-left: 6px;"> |
||||||
|
{{item.count}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<nz-spin *ngIf="isSpin_YK" nzSimple class="nzspin"></nz-spin> |
||||||
|
</div> |
||||||
|
<div class="leftitem ranking" style="margin-left: 50px;"> |
||||||
|
<span class="itemname">近30天油库排名</span> |
||||||
|
<div class="box eventbox"> |
||||||
|
<div class="eventboxitem" *ngFor="let item of HomeAggregatioData_YK.stationAgg;let key = index"> |
||||||
|
<div class="eventname" [title]="item.companyName + item.stationName"> |
||||||
|
<div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||||
|
<ng-container *ngIf="key != 9; else elseTemplate"> |
||||||
|
{{'0' + (key + 1)}} |
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate> |
||||||
|
{{key + 1}} |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
{{item.companyName}} {{item.stationName}} |
||||||
|
</div> |
||||||
|
<div class="progressbox"> |
||||||
|
<div class="progress"> |
||||||
|
<div class="colorbar" |
||||||
|
[ngStyle]="width(item.count,HomeAggregatioData_YK.stationAgg[0].count)" |
||||||
|
[ngClass]="{'yellow': key < 3,'blue': key > 2}"> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div style="margin-left: 6px;"> |
||||||
|
{{item.count}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<nz-spin *ngIf="isSpin_YK" nzSimple class="nzspin"></nz-spin> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="rightitem"> |
||||||
|
<div class="numlistbox"> |
||||||
|
<img src="../../../assets/images/stationNum.png" alt=""> |
||||||
|
<div class="content"> |
||||||
|
<span class="lightspan lightspan1">{{HomeAggregatioData_YK.dev.stationCount}}</span> |
||||||
|
<span>接入油库(个)</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="numlistbox"> |
||||||
|
<img src="../../../assets/images/modelNum.png" alt=""> |
||||||
|
<div class="content"> |
||||||
|
<span class="lightspan lightspan2">{{HomeAggregatioData_YK.dev.violationCount}}</span> |
||||||
|
<span>预警分析模型(个)</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="numlistbox"> |
||||||
|
<img src="../../../assets/images/cameraNum.png" alt=""> |
||||||
|
<div class="content"> |
||||||
|
<span class="lightspan lightspan3">{{HomeAggregatioData_YK.dev.cameraCount}}</span> |
||||||
|
<span>摄像头(个)</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="angle-border left-top-border"></div> |
||||||
|
<div class="angle-border right-top-border"></div> |
||||||
|
<div class="angle-border left-bottom-border"></div> |
||||||
|
<div class="angle-border right-bottom-border"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="bottombox"> |
||||||
|
<div class="bottomitem"> |
||||||
|
<div class="title" style="padding-left: 20px;"> |
||||||
|
<app-title [name]="'预警走势'"></app-title> |
||||||
|
</div> |
||||||
|
<div class="bottomitemcontent bottomitemcontent1"> |
||||||
|
<div class="bottomitemchartboxspecial"> |
||||||
|
<span class="bartitle">油站近30天预警事件统计</span> |
||||||
|
<div class="eventechartpie" id="eventechartpie"></div> |
||||||
|
<div class="eventechartline" id="eventechartline"></div> |
||||||
|
<div class="angle-border left-top-border"></div> |
||||||
|
<div class="angle-border right-top-border"></div> |
||||||
|
<div class="angle-border left-bottom-border"></div> |
||||||
|
<div class="angle-border right-bottom-border"></div> |
||||||
|
<nz-spin *ngIf="isSpinOfEventWarning" nzSimple class="nzspin"></nz-spin> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottomitemcontent bottomitemcontent2"> |
||||||
|
<div class="bottomitemchartboxspecial"> |
||||||
|
<span class="bartitle">油库近30天预警事件统计</span> |
||||||
|
<div class="eventechartpie" id="eventechartpie_YK"></div> |
||||||
|
<div class="eventechartline" id="eventechartline_YK"></div> |
||||||
|
<div class="angle-border left-top-border"></div> |
||||||
|
<div class="angle-border right-top-border"></div> |
||||||
|
<div class="angle-border left-bottom-border"></div> |
||||||
|
<div class="angle-border right-bottom-border"></div> |
||||||
|
<nz-spin *ngIf="isSpinOfEventWarning_YK" nzSimple class="nzspin"></nz-spin> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottomitem"> |
||||||
|
<div class="title"> |
||||||
|
<app-title [name]="'事件监督'"></app-title> |
||||||
|
</div> |
||||||
|
<div class="bottomitemcontent bottomitemcontent3"> |
||||||
|
<div class="bottomitemchartboxspecial"> |
||||||
|
<span class="bartitle">油站近30天卸油预警走势</span> |
||||||
|
<div class="eventechartpie" id="oilechartpie"></div> |
||||||
|
<div style="height: 80%;" class="eventechartline" id="oilechartline"></div> |
||||||
|
<div class="angle-border left-top-border"></div> |
||||||
|
<div class="angle-border right-top-border"></div> |
||||||
|
<div class="angle-border left-bottom-border"></div> |
||||||
|
<div class="angle-border right-bottom-border"></div> |
||||||
|
<nz-spin *ngIf="isSpinOfOilDischarge" nzSimple class="nzspin"></nz-spin> |
||||||
|
<div class="oilNum"> |
||||||
|
<div class="oilNumItem"> |
||||||
|
<div class="pointbox"> |
||||||
|
<div class="point"></div> |
||||||
|
<span>累计卸油总车次</span> |
||||||
|
</div> |
||||||
|
{{HomeAggregatioData.ouViolationType.ouTotalCount}} |
||||||
|
</div> |
||||||
|
<div class="oilNumItem"> |
||||||
|
<div class="pointbox"> |
||||||
|
<div class="point"></div> |
||||||
|
<span>累计卸油预警车次</span> |
||||||
|
</div> |
||||||
|
{{HomeAggregatioData.ouViolationType.ouNotCorrectCount}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="bottomitemcontent bottomitemcontent4"> |
||||||
|
<div class="bottomitemchartboxspecial"> |
||||||
|
<span class="bartitle">油库近30天发油预警走势</span> |
||||||
|
<div class="eventechartpie" id="oilechartpie_YK"></div> |
||||||
|
<div style="height: 80%;" class="eventechartline" id="oilechartline_YK"></div> |
||||||
|
<div class="angle-border left-top-border"></div> |
||||||
|
<div class="angle-border right-top-border"></div> |
||||||
|
<div class="angle-border left-bottom-border"></div> |
||||||
|
<div class="angle-border right-bottom-border"></div> |
||||||
|
<nz-spin *ngIf="isSpinOfOilDischarge_YK" nzSimple class="nzspin"></nz-spin> |
||||||
|
<div class="oilNum"> |
||||||
|
<div class="oilNumItem"> |
||||||
|
<div class="pointbox"> |
||||||
|
<div class="point"></div> |
||||||
|
<span>累计发油总车次</span> |
||||||
|
</div> |
||||||
|
{{HomeAggregatioData_YK.ouViolationType.ouTotalCount}} |
||||||
|
</div> |
||||||
|
<div class="oilNumItem"> |
||||||
|
<div class="pointbox"> |
||||||
|
<div class="point"></div> |
||||||
|
<span>累计发油预警车次</span> |
||||||
|
</div> |
||||||
|
{{HomeAggregatioData_YK.ouViolationType.ouNotCorrectCount}} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,578 @@ |
|||||||
|
.homepagebox { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.informbox { |
||||||
|
width: 100%; |
||||||
|
height: 45px; |
||||||
|
margin: 10px 0; |
||||||
|
display: flex; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 22px; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.warningnumber { |
||||||
|
width: 250px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 60px; |
||||||
|
} |
||||||
|
|
||||||
|
.num { |
||||||
|
font-size: 32px; |
||||||
|
text-shadow: 0px 0px 6px #8df; |
||||||
|
color: white; |
||||||
|
font-weight: 600; |
||||||
|
margin: 0 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.today { |
||||||
|
font-size: 18px; |
||||||
|
font-family: titlefont; |
||||||
|
color: #d0eaff; |
||||||
|
margin-bottom: 13px; |
||||||
|
margin-left: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.inform { |
||||||
|
flex: 1; |
||||||
|
border: 1px solid rgba(54, 162, 255, 0.4); |
||||||
|
height: 45px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.infologo { |
||||||
|
img { |
||||||
|
width: 32px; |
||||||
|
} |
||||||
|
|
||||||
|
height: 32px; |
||||||
|
line-height: 32px; |
||||||
|
color: #91ccff; |
||||||
|
font-size: 14px; |
||||||
|
margin-left: 16px; |
||||||
|
margin-right: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
#container { |
||||||
|
flex: 1; |
||||||
|
position: relative; |
||||||
|
height: 46px; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
#list-wrapper { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
ul { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
|
||||||
|
.info { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
height: 46px; |
||||||
|
line-height: 46px; |
||||||
|
color: #fff; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.infoitem { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
img { |
||||||
|
width: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.btn { |
||||||
|
color: #36a2ff; |
||||||
|
|
||||||
|
span { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
span:nth-child(1) { |
||||||
|
margin-right: 24px; |
||||||
|
} |
||||||
|
|
||||||
|
span:nth-child(2) { |
||||||
|
margin-right: 40px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.centerbox { |
||||||
|
height: 45%; |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
box-sizing: border-box; |
||||||
|
.title { |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 20px; |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
} |
||||||
|
.content_box { |
||||||
|
position: relative; |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 5px 30px; |
||||||
|
border: 1px solid rgba(54, 162, 255, 0.3); |
||||||
|
|
||||||
|
.leftitem { |
||||||
|
position: relative; |
||||||
|
flex: 1; |
||||||
|
box-sizing: border-box; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
.eventechartpieAll { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
.progress { |
||||||
|
height: 4px; |
||||||
|
width: 100%; |
||||||
|
background: rgba(54, 162, 255, 0.2); |
||||||
|
position: relative; |
||||||
|
.colorbar { |
||||||
|
height: 4px; |
||||||
|
left: 0; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
.red { |
||||||
|
color: #ff4b65; |
||||||
|
background: linear-gradient( |
||||||
|
90deg, |
||||||
|
rgba(255, 75, 101, 0) 0%, |
||||||
|
#ff4b65 100% |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
.yellow { |
||||||
|
color: #ff9963; |
||||||
|
background: linear-gradient( |
||||||
|
90deg, |
||||||
|
rgba(255, 153, 99, 0) 0%, |
||||||
|
#ff9963 100% |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
.blue { |
||||||
|
color: #36a2ff; |
||||||
|
background: linear-gradient( |
||||||
|
90deg, |
||||||
|
rgba(54, 162, 255, 0) 0%, |
||||||
|
#36a2ff 100% |
||||||
|
); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.itemname { |
||||||
|
color: #fff; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
.box { |
||||||
|
flex: 1; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.areabox { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-around; |
||||||
|
|
||||||
|
.areaboxitemtop { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 14px; |
||||||
|
margin-bottom: 12px; |
||||||
|
|
||||||
|
.red { |
||||||
|
color: #ff4b65; |
||||||
|
} |
||||||
|
|
||||||
|
.yellow { |
||||||
|
color: #ff9963; |
||||||
|
} |
||||||
|
|
||||||
|
.blue { |
||||||
|
color: #36a2ff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.eventbox { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-around; |
||||||
|
|
||||||
|
.eventboxitem { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
color: #fff; |
||||||
|
font-size: 12px; |
||||||
|
|
||||||
|
.eventname { |
||||||
|
display: inline-block; |
||||||
|
width: 30%; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
|
||||||
|
.block { |
||||||
|
display: inline-block; |
||||||
|
width: 14px; |
||||||
|
height: 14px; |
||||||
|
line-height: 12px; |
||||||
|
font-size: 8px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.yellow { |
||||||
|
background-color: #ff9963; |
||||||
|
} |
||||||
|
|
||||||
|
.blue { |
||||||
|
background-color: #36a2ff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.progressbox { |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.stationbox { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-around; |
||||||
|
|
||||||
|
.stationboxitem { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
color: #fff; |
||||||
|
font-size: 12px; |
||||||
|
|
||||||
|
.stationname { |
||||||
|
display: inline-block; |
||||||
|
width: 50%; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
|
||||||
|
.block { |
||||||
|
display: inline-block; |
||||||
|
width: 14px; |
||||||
|
height: 14px; |
||||||
|
line-height: 12px; |
||||||
|
font-size: 8px; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.yellow { |
||||||
|
background-color: #ff9963; |
||||||
|
} |
||||||
|
|
||||||
|
.blue { |
||||||
|
background-color: #36a2ff; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.area { |
||||||
|
flex: 1; |
||||||
|
|
||||||
|
.yellow { |
||||||
|
color: #ff9963; |
||||||
|
} |
||||||
|
|
||||||
|
.blue { |
||||||
|
color: #36a2ff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.leftitemlimit { |
||||||
|
max-width: 280px; |
||||||
|
} |
||||||
|
|
||||||
|
.ranking { |
||||||
|
flex: 1; |
||||||
|
padding: 5px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.rightitem { |
||||||
|
width: 400px; |
||||||
|
position: relative; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 12px 0; |
||||||
|
padding-top: 20px; |
||||||
|
margin-left: 30px; |
||||||
|
.numlistbox { |
||||||
|
height: 64px; |
||||||
|
width: 50%; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
img { |
||||||
|
width: 45px; |
||||||
|
height: 45px; |
||||||
|
margin-right: 18px; |
||||||
|
} |
||||||
|
|
||||||
|
.content { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: flex-start; |
||||||
|
|
||||||
|
span { |
||||||
|
color: white; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
|
||||||
|
.lightspan { |
||||||
|
font-size: 22px; |
||||||
|
font-weight: 600; |
||||||
|
line-height: 28px; |
||||||
|
} |
||||||
|
|
||||||
|
.lightspan1 { |
||||||
|
text-shadow: 0px 0px 16px #3a9aff; |
||||||
|
} |
||||||
|
|
||||||
|
.lightspan2 { |
||||||
|
text-shadow: 0px 0px 16px #23d9ff; |
||||||
|
} |
||||||
|
|
||||||
|
.lightspan3 { |
||||||
|
text-shadow: 0px 0px 16px #ffb791; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bottombox { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.title { |
||||||
|
box-sizing: border-box; |
||||||
|
width: 100%; |
||||||
|
height: 40px; |
||||||
|
} |
||||||
|
|
||||||
|
.bottomitem { |
||||||
|
flex: 1; |
||||||
|
height: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.bottomitemcontent { |
||||||
|
flex: 1; |
||||||
|
box-sizing: border-box; |
||||||
|
.bottomitemchartbox { |
||||||
|
position: relative; |
||||||
|
height: 100%; |
||||||
|
border: 1px solid rgba(54, 162, 255, 0.3); |
||||||
|
display: flex; |
||||||
|
|
||||||
|
|
||||||
|
.numlistbox { |
||||||
|
position: absolute; |
||||||
|
left: 5%; |
||||||
|
bottom: 6%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.numlistboxitem { |
||||||
|
display: flex; |
||||||
|
color: #fff; |
||||||
|
align-items: center; |
||||||
|
margin: 3px 0; |
||||||
|
|
||||||
|
span { |
||||||
|
font-size: 12px; |
||||||
|
} |
||||||
|
|
||||||
|
.top { |
||||||
|
display: inline-block; |
||||||
|
width: 15px; |
||||||
|
height: 15px; |
||||||
|
line-height: 15px; |
||||||
|
text-align: center; |
||||||
|
font-size: 8px; |
||||||
|
border-radius: 2px; |
||||||
|
} |
||||||
|
|
||||||
|
.top1 { |
||||||
|
background: #ff4b65; |
||||||
|
} |
||||||
|
|
||||||
|
.top2 { |
||||||
|
background: #ff9963; |
||||||
|
} |
||||||
|
|
||||||
|
.top3 { |
||||||
|
background: #36a2ff; |
||||||
|
} |
||||||
|
|
||||||
|
.name { |
||||||
|
margin: 0 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.eventechartpie, |
||||||
|
.oilechartpie { |
||||||
|
height: 100%; |
||||||
|
width: 23%; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.eventechartline, |
||||||
|
.oilechartline { |
||||||
|
height: 100%; |
||||||
|
flex: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.bottomitemchartboxspecial { |
||||||
|
position: relative; |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
border: 1px solid rgba(54, 162, 255, 0.3); |
||||||
|
display: flex; |
||||||
|
|
||||||
|
.bartitle { |
||||||
|
position: absolute; |
||||||
|
top: 5px; |
||||||
|
left: 20px; |
||||||
|
color: #ffffff; |
||||||
|
font-size: 13px; |
||||||
|
} |
||||||
|
|
||||||
|
.eventechartpie { |
||||||
|
height: 100%; |
||||||
|
width: 100%; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
|
||||||
|
.eventechartline { |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
bottom: 0; |
||||||
|
height: 83%; |
||||||
|
width: 76%; |
||||||
|
} |
||||||
|
|
||||||
|
.oilNum { |
||||||
|
position: absolute; |
||||||
|
left:40px; |
||||||
|
bottom: 5px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.oilNumItem { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
color: white; |
||||||
|
font-size: 12px; |
||||||
|
|
||||||
|
span { |
||||||
|
margin: 0 4px; |
||||||
|
} |
||||||
|
|
||||||
|
.pointbox { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.point { |
||||||
|
width: 6px; |
||||||
|
height: 6px; |
||||||
|
background-color: #91ccff; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.bottomitemcontent1 { |
||||||
|
padding: 5px 0 10px 30px; |
||||||
|
} |
||||||
|
.bottomitemcontent2 { |
||||||
|
padding: 0px 0 10px 30px; |
||||||
|
} |
||||||
|
.bottomitemcontent3 { |
||||||
|
padding: 5px 30px 10px 20px; |
||||||
|
} |
||||||
|
.bottomitemcontent4 { |
||||||
|
padding: 0px 30px 10px 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.angle-border { |
||||||
|
position: absolute; |
||||||
|
width: 8px; |
||||||
|
height: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.left-top-border { |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
border-left: 2px solid #ffffff; |
||||||
|
border-top: 2px solid #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.right-top-border { |
||||||
|
top: 0; |
||||||
|
right: -2px; |
||||||
|
border-right: 2px solid #ffffff; |
||||||
|
border-top: 2px solid #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.left-bottom-border { |
||||||
|
bottom: 0; |
||||||
|
left: 0; |
||||||
|
border-bottom: 2px solid #ffffff; |
||||||
|
border-left: 2px solid #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.right-bottom-border { |
||||||
|
bottom: 0; |
||||||
|
right: -2px; |
||||||
|
border-right: 2px solid #ffffff; |
||||||
|
border-bottom: 2px solid #ffffff; |
||||||
|
} |
File diff suppressed because it is too large
Load Diff
@ -1,54 +1,69 @@ |
|||||||
import { Routes, RouterModule } from '@angular/router'; |
import { Routes, RouterModule } from "@angular/router"; |
||||||
import { NgModule } from '@angular/core'; |
import { NgModule } from "@angular/core"; |
||||||
import { PlanComponent } from './plan/plan.component'; |
import { PlanComponent } from "./plan/plan.component"; |
||||||
import { TodayWarningComponent } from './today-warning/today-warning.component'; |
import { TodayWarningComponent } from "./today-warning/today-warning.component"; |
||||||
import { CriminalRecordsComponent } from './records/criminal-records/criminal-records.component'; |
import { CriminalRecordsComponent } from "./records/criminal-records/criminal-records.component"; |
||||||
import { AuthGuard } from '../auth.guard' |
import { AuthGuard } from "../auth.guard"; |
||||||
import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component'; |
import { TodayWarningAdminComponent } from "./today-warning-admin/today-warning-admin.component"; |
||||||
import { CriminalRecordsAdminComponent } from './records/criminal-records-admin/criminal-records-admin.component'; |
import { CriminalRecordsAdminComponent } from "./records/criminal-records-admin/criminal-records-admin.component"; |
||||||
import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component'; |
import { OilStationInfoComponent } from "./oil-station-info/oil-station-info.component"; |
||||||
import { EquipmentInfoComponent } from './equipment-info/equipment-info.component'; |
import { EquipmentInfoComponent } from "./equipment-info/equipment-info.component"; |
||||||
import { PlanAdminComponent } from './plan-admin/plan-admin.component'; |
import { PlanAdminComponent } from "./plan-admin/plan-admin.component"; |
||||||
import { HomePageComponent } from './home-page/home-page.component'; |
import { HomePageComponent } from "./home-page/home-page.component"; |
||||||
import { OilUnloadingProcessListComponent } from './records/oil-unloading-process-list/oil-unloading-process-list.component'; |
import { OilUnloadingProcessListComponent } from "./records/oil-unloading-process-list/oil-unloading-process-list.component"; |
||||||
import { init3DGuard } from './init3D.guard'; |
import { init3DGuard } from "./init3D.guard"; |
||||||
|
|
||||||
import { NavBarComponent } from './license/nav-bar/nav-bar.component'; |
import { NavBarComponent } from "./license/nav-bar/nav-bar.component"; |
||||||
import { AuditNavComponent } from './audit/audit-nav/audit-nav.component'; |
import { AuditNavComponent } from "./audit/audit-nav/audit-nav.component"; |
||||||
import { WarningStatisticsListComponent } from './records/warning-statistics-list/warning-statistics-list.component'; |
import { WarningStatisticsListComponent } from "./records/warning-statistics-list/warning-statistics-list.component"; |
||||||
import { RecordsNavComponent } from './records/records-nav/records-nav.component'; |
import { RecordsNavComponent } from "./records/records-nav/records-nav.component"; |
||||||
import { DownImageComponent } from './down-image/down-image.component' |
import { DownImageComponent } from "./down-image/down-image.component"; |
||||||
|
import { HomePageComprehensiveComponent } from "./home-page-comprehensive/home-page-comprehensive.component"; |
||||||
|
|
||||||
const routes: Routes = [ |
const routes: Routes = [ |
||||||
{ path: 'homepage', component: HomePageComponent }, |
{ path: "homepage", component: HomePageComponent }, |
||||||
{ path: 'plan', component: PlanAdminComponent }, |
{ path: "comprehensive", component: HomePageComprehensiveComponent }, |
||||||
{ path: 'plan/petrolStation', component: PlanComponent, canActivate: [init3DGuard], }, |
{ path: "plan", component: PlanAdminComponent }, |
||||||
{ path: 'todaywarning', component: TodayWarningAdminComponent }, |
|
||||||
{ path: 'todaywarning/petrolStation', component: TodayWarningComponent }, |
|
||||||
{ |
{ |
||||||
path: 'records_nav', component: RecordsNavComponent, children: [ |
path: "plan/petrolStation", |
||||||
{ path: 'all', component: CriminalRecordsAdminComponent }, |
component: PlanComponent, |
||||||
{ path: 'oliunloadinglist', component: OilUnloadingProcessListComponent }, |
canActivate: [init3DGuard], |
||||||
{ path: 'warningstatisticslist', component: WarningStatisticsListComponent }, |
|
||||||
] |
|
||||||
}, |
}, |
||||||
|
{ path: "todaywarning", component: TodayWarningAdminComponent }, |
||||||
|
{ path: "todaywarning/petrolStation", component: TodayWarningComponent }, |
||||||
{ |
{ |
||||||
path: 'records_nav/petrolStation', component: RecordsNavComponent, children: [ |
path: "records_nav", |
||||||
{ path: 'all', component: CriminalRecordsComponent }, |
component: RecordsNavComponent, |
||||||
{ path: 'oliunloadinglist', component: OilUnloadingProcessListComponent }, |
children: [ |
||||||
{ path: 'warningstatisticslist', component: WarningStatisticsListComponent } |
{ path: "all", component: CriminalRecordsAdminComponent }, |
||||||
] |
{ path: "oliunloadinglist", component: OilUnloadingProcessListComponent }, |
||||||
|
{ |
||||||
|
path: "warningstatisticslist", |
||||||
|
component: WarningStatisticsListComponent, |
||||||
}, |
}, |
||||||
{ path: 'equipmentInfo', component: EquipmentInfoComponent }, |
], |
||||||
{ path: 'oliStationInfo', component: OilStationInfoComponent }, |
}, |
||||||
{ path: 'license/petrolStation', component: NavBarComponent }, |
{ |
||||||
{ path: 'audit', component: AuditNavComponent }, |
path: "records_nav/petrolStation", |
||||||
{ path: 'downImage', component: DownImageComponent } |
component: RecordsNavComponent, |
||||||
|
children: [ |
||||||
|
{ path: "all", component: CriminalRecordsComponent }, |
||||||
|
{ path: "oliunloadinglist", component: OilUnloadingProcessListComponent }, |
||||||
|
{ |
||||||
|
path: "warningstatisticslist", |
||||||
|
component: WarningStatisticsListComponent, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ path: "equipmentInfo", component: EquipmentInfoComponent }, |
||||||
|
{ path: "oliStationInfo", component: OilStationInfoComponent }, |
||||||
|
{ path: "license/petrolStation", component: NavBarComponent }, |
||||||
|
{ path: "audit", component: AuditNavComponent }, |
||||||
|
{ path: "downImage", component: DownImageComponent }, |
||||||
]; |
]; |
||||||
|
|
||||||
@NgModule({ |
@NgModule({ |
||||||
imports: [RouterModule.forChild(routes)], |
imports: [RouterModule.forChild(routes)], |
||||||
exports: [RouterModule] |
exports: [RouterModule], |
||||||
}) |
}) |
||||||
export class PagesRoutingModule {} |
export class PagesRoutingModule {} |
||||||
|
@ -1,161 +1,175 @@ |
|||||||
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; |
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; |
||||||
import { HttpClient } from '@angular/common/http'; |
import { HttpClient } from "@angular/common/http"; |
||||||
import { TreeService } from 'src/app/service/tree.service'; |
import { TreeService } from "src/app/service/tree.service"; |
||||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
import { FormBuilder, FormGroup, Validators } from "@angular/forms"; |
||||||
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown'; |
import { |
||||||
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd/tree'; |
NzContextMenuService, |
||||||
import { Router } from '@angular/router'; |
NzDropdownMenuComponent, |
||||||
import { NavChangeService } from 'src/app/service/navChange.service'; |
} from "ng-zorro-antd/dropdown"; |
||||||
import { fromEvent } from 'rxjs'; |
import { |
||||||
import { debounceTime } from 'rxjs/operators'; |
NzFormatEmitEvent, |
||||||
import { OilStationListComponent } from './oil-station-list/oil-station-list.component'; |
NzTreeComponent, |
||||||
import { UpdateLicenseListComponent } from './update-license-list/update-license-list.component'; |
NzTreeNode, |
||||||
import { FileLicenseListComponent } from './file-license-list/file-license-list.component'; |
} from "ng-zorro-antd/tree"; |
||||||
|
import { Router } from "@angular/router"; |
||||||
|
import { NavChangeService } from "src/app/service/navChange.service"; |
||||||
|
import { fromEvent } from "rxjs"; |
||||||
|
import { debounceTime } from "rxjs/operators"; |
||||||
|
import { OilStationListComponent } from "./oil-station-list/oil-station-list.component"; |
||||||
|
import { UpdateLicenseListComponent } from "./update-license-list/update-license-list.component"; |
||||||
|
import { FileLicenseListComponent } from "./file-license-list/file-license-list.component"; |
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-plan-admin', |
selector: "app-plan-admin", |
||||||
templateUrl: './plan-admin.component.html', |
templateUrl: "./plan-admin.component.html", |
||||||
styleUrls: ['./plan-admin.component.scss'] |
styleUrls: ["./plan-admin.component.scss"], |
||||||
}) |
}) |
||||||
export class PlanAdminComponent implements OnInit { |
export class PlanAdminComponent implements OnInit { |
||||||
|
@ViewChild("nzTreeComponent", { static: false }) |
||||||
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; |
nzTreeComponent!: NzTreeComponent; |
||||||
@ViewChild('child') oilStationListComponent!: OilStationListComponent;; |
@ViewChild("child") oilStationListComponent!: OilStationListComponent; |
||||||
@ViewChild('child2') updateLicenseListComponent!: UpdateLicenseListComponent;; |
@ViewChild("child2") updateLicenseListComponent!: UpdateLicenseListComponent; |
||||||
@ViewChild('child3') fileLicenseListComponent!: FileLicenseListComponent;; |
@ViewChild("child3") fileLicenseListComponent!: FileLicenseListComponent; |
||||||
constructor(private element: ElementRef, private navChangeService: NavChangeService, private http: HttpClient, private toTree: TreeService, private fb: FormBuilder, private nzContextMenuService: NzContextMenuService, private router: Router) { } |
constructor( |
||||||
|
private element: ElementRef, |
||||||
|
private navChangeService: NavChangeService, |
||||||
|
private http: HttpClient, |
||||||
|
private toTree: TreeService, |
||||||
|
private fb: FormBuilder, |
||||||
|
private nzContextMenuService: NzContextMenuService, |
||||||
|
private router: Router |
||||||
|
) {} |
||||||
|
|
||||||
ngOnInit(): void { |
ngOnInit(): void { |
||||||
this.getAllOrganization() |
this.getAllOrganization(); |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//选择右侧tab页
|
//选择右侧tab页
|
||||||
selectedTab = 0 |
selectedTab = 0; |
||||||
selectTab(index) { |
selectTab(index) { |
||||||
this.selectedTab = index |
this.selectedTab = index; |
||||||
|
|
||||||
if (this.selectedTab == 0) { |
if (this.selectedTab == 0) { |
||||||
setTimeout(() => { |
setTimeout(() => { |
||||||
this.oilStationListComponent.list = [] |
this.oilStationListComponent.list = []; |
||||||
this.oilStationListComponent.SkipCount = '0' |
this.oilStationListComponent.SkipCount = "0"; |
||||||
this.oilStationListComponent.onChildMethod() |
this.oilStationListComponent.onChildMethod(); |
||||||
}, 0); |
}, 0); |
||||||
} |
} |
||||||
if (this.selectedTab == 1) { |
if (this.selectedTab == 1) { |
||||||
setTimeout(() => { |
setTimeout(() => { |
||||||
this.updateLicenseListComponent.list = [] |
this.updateLicenseListComponent.list = []; |
||||||
this.updateLicenseListComponent.SkipCount = '0' |
this.updateLicenseListComponent.SkipCount = "0"; |
||||||
this.updateLicenseListComponent.onChildMethod() |
this.updateLicenseListComponent.onChildMethod(); |
||||||
}, 0); |
}, 0); |
||||||
} |
} |
||||||
if (this.selectedTab == 2) { |
if (this.selectedTab == 2) { |
||||||
setTimeout(() => { |
setTimeout(() => { |
||||||
this.fileLicenseListComponent.list = [] |
this.fileLicenseListComponent.list = []; |
||||||
this.fileLicenseListComponent.SkipCount = '0' |
this.fileLicenseListComponent.SkipCount = "0"; |
||||||
this.fileLicenseListComponent.onChildMethod() |
this.fileLicenseListComponent.onChildMethod(); |
||||||
}, 0); |
}, 0); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
//获取所有组织机构
|
//获取所有组织机构
|
||||||
nodes: any = [] |
nodes: any = []; |
||||||
nzExpandAll = false |
nzExpandAll = false; |
||||||
nzSelectedKeys: any = [] |
nzSelectedKeys: any = []; |
||||||
orSpin: boolean = false |
orSpin: boolean = false; |
||||||
organization: any |
organization: any; |
||||||
getAllOrganization() { |
getAllOrganization() { |
||||||
this.orSpin = true |
this.orSpin = true; |
||||||
let OrganizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id |
|
||||||
let params = { |
let params = { |
||||||
OrganizationUnitId: OrganizationUnitId, |
IsContainsChildren: "true", |
||||||
IsContainsChildren: "true" |
}; |
||||||
} |
this.http |
||||||
this.http.get('/api/services/app/Organization/GetAll', { |
.get("/api/services/app/Organization/GetAll", { |
||||||
params: params |
params: params, |
||||||
}).subscribe((data: any) => { |
|
||||||
data.result.items = data.result.items.filter((item, i) => { |
|
||||||
return !item.isGasStation |
|
||||||
}) |
|
||||||
this.organization = data.result.items |
|
||||||
this.getStationsNum(data.result.items) |
|
||||||
}) |
}) |
||||||
|
.subscribe((data: any) => { |
||||||
|
this.organization = data.result.items; |
||||||
|
this.getStationsNum(data.result.items); |
||||||
|
}); |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
//获得组织机构下有多少油站
|
//获得组织机构下有多少油站
|
||||||
stationsList |
stationsList; |
||||||
getStationsNum(e) { |
getStationsNum(currentOrList) { |
||||||
let OrganizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id |
console.log("e", currentOrList); |
||||||
this.http.get('/api/services/app/GasStation/GetCountsByOrganizations?IsContainsChildren=true').subscribe((data: any) => { |
let OrganizationUnitId = JSON.parse(sessionStorage.getItem("userdata")) |
||||||
this.stationsList = data.result |
.organization.id; |
||||||
const arrs = e.map(item => { |
let OrganizationUnitIds = JSON.parse( |
||||||
const data = this.stationsList.find(i => item.id == i.organizationId) |
sessionStorage.getItem("userdata") |
||||||
|
).organizations.map((v) => v.id); |
||||||
|
this.http |
||||||
|
.get( |
||||||
|
"/api/services/app/GasStation/GetCountsByOrganizations?IsContainsChildren=true" |
||||||
|
) |
||||||
|
.subscribe((data: any) => { |
||||||
|
this.stationsList = data.result; |
||||||
|
const arrs = currentOrList.map((item) => { |
||||||
|
const data = this.stationsList.find( |
||||||
|
(i) => item.id == i.organizationId |
||||||
|
); |
||||||
return { |
return { |
||||||
...item, |
...item, |
||||||
products: data ? data : false |
products: data ? data : false, |
||||||
} |
}; |
||||||
}) |
}); |
||||||
|
|
||||||
for (let index = 0; index < arrs.length; index++) { |
for (let index = 0; index < arrs.length; index++) { |
||||||
|
if (OrganizationUnitIds && OrganizationUnitIds.length !== 0) { |
||||||
|
if (OrganizationUnitIds.includes(arrs[index].id)) { |
||||||
|
arrs[index].parentId = null; |
||||||
|
} |
||||||
|
} else { |
||||||
if (arrs[index].id == OrganizationUnitId) { |
if (arrs[index].id == OrganizationUnitId) { |
||||||
arrs[index].parentId = null |
arrs[index].parentId = null; |
||||||
} |
} |
||||||
arrs[index].title = arrs[index].displayName |
|
||||||
arrs[index].key = arrs[index].id |
|
||||||
} |
} |
||||||
this.orSpin = false |
arrs[index].title = arrs[index].displayName; |
||||||
this.nodes = [...this.toTree.toTree(arrs)] |
arrs[index].key = arrs[index].id; |
||||||
this.nzExpandedKeys = [OrganizationUnitId] |
} |
||||||
this.nzSelectedKeys = [OrganizationUnitId] |
this.orSpin = false; |
||||||
sessionStorage.setItem('planAdminOrid', OrganizationUnitId) |
this.nodes = [...this.toTree.toTree(arrs)]; |
||||||
this.oilStationListComponent.onChildMethod() |
this.nzExpandedKeys = [this.nodes[0].id]; |
||||||
}) |
this.nzSelectedKeys = [this.nodes[0].id]; |
||||||
|
sessionStorage.setItem("planAdminOrid", this.nodes[0].id); |
||||||
|
this.oilStationListComponent.onChildMethod(); |
||||||
|
}); |
||||||
} |
} |
||||||
|
|
||||||
|
nzExpandedKeys: any = []; |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
nzExpandedKeys: any = [] |
|
||||||
activatedNode?: NzTreeNode; |
activatedNode?: NzTreeNode; |
||||||
//点击tree节点
|
//点击tree节点
|
||||||
activeNode(data: NzFormatEmitEvent): void { |
activeNode(data: NzFormatEmitEvent): void { |
||||||
this.activatedNode = data.node!; |
this.activatedNode = data.node!; |
||||||
sessionStorage.setItem('planAdminOrid', data.node.origin.id) |
sessionStorage.setItem("planAdminOrid", data.node.origin.id); |
||||||
if (this.selectedTab == 0) { |
if (this.selectedTab == 0) { |
||||||
setTimeout(() => { |
setTimeout(() => { |
||||||
this.oilStationListComponent.list = [] |
this.oilStationListComponent.list = []; |
||||||
this.oilStationListComponent.SkipCount = '0' |
this.oilStationListComponent.SkipCount = "0"; |
||||||
this.oilStationListComponent.onChildMethod() |
this.oilStationListComponent.onChildMethod(); |
||||||
}, 0); |
}, 0); |
||||||
} |
} |
||||||
if (this.selectedTab == 1) { |
if (this.selectedTab == 1) { |
||||||
setTimeout(() => { |
setTimeout(() => { |
||||||
this.updateLicenseListComponent.list = [] |
this.updateLicenseListComponent.list = []; |
||||||
this.updateLicenseListComponent.SkipCount = '0' |
this.updateLicenseListComponent.SkipCount = "0"; |
||||||
this.updateLicenseListComponent.onChildMethod() |
this.updateLicenseListComponent.onChildMethod(); |
||||||
}, 0); |
}, 0); |
||||||
} |
} |
||||||
if (this.selectedTab == 2) { |
if (this.selectedTab == 2) { |
||||||
setTimeout(() => { |
setTimeout(() => { |
||||||
this.fileLicenseListComponent.list = [] |
this.fileLicenseListComponent.list = []; |
||||||
this.fileLicenseListComponent.SkipCount = '0' |
this.fileLicenseListComponent.SkipCount = "0"; |
||||||
this.fileLicenseListComponent.onChildMethod() |
this.fileLicenseListComponent.onChildMethod(); |
||||||
}, 0); |
}, 0); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
expand(e, node) { |
expand(e, node) { |
||||||
e.stopPropagation() |
e.stopPropagation(); |
||||||
node.isExpanded = !node.isExpanded |
node.isExpanded = !node.isExpanded; |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
|
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -1,80 +1,85 @@ |
|||||||
import { Component, OnInit } from '@angular/core'; |
import { Component, OnInit } from "@angular/core"; |
||||||
import { Router } from '@angular/router'; |
import { Router } from "@angular/router"; |
||||||
import { IsShowEchartsService } from 'src/app/service/isShowEcharts.service'; |
import { IsShowEchartsService } from "src/app/service/isShowEcharts.service"; |
||||||
import { Location } from "@angular/common"; |
import { Location } from "@angular/common"; |
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-records-nav', |
selector: "app-records-nav", |
||||||
templateUrl: './records-nav.component.html', |
templateUrl: "./records-nav.component.html", |
||||||
styleUrls: ['./records-nav.component.scss'] |
styleUrls: ["./records-nav.component.scss"], |
||||||
}) |
}) |
||||||
export class RecordsNavComponent implements OnInit { |
export class RecordsNavComponent implements OnInit { |
||||||
|
constructor( |
||||||
|
private router: Router, |
||||||
|
private isShowEcharts: IsShowEchartsService, |
||||||
|
private location: Location |
||||||
|
) {} |
||||||
|
|
||||||
constructor(private router: Router, private isShowEcharts: IsShowEchartsService,private location: Location) { } |
isEcharts = true; |
||||||
|
menuList = ["预警类型统计", "卸油统计", "证照预警统计"]; |
||||||
isEcharts = true |
tap = []; |
||||||
menuList = ['预警类型统计', '卸油统计', '证照预警统计'] |
userMenu = []; |
||||||
tap=[] |
menu = []; |
||||||
userMenu = [] |
selectedMenu; |
||||||
menu=[] |
|
||||||
selectedMenu |
|
||||||
ngOnInit(): void { |
ngOnInit(): void { |
||||||
let a= sessionStorage.getItem('userdata') |
let a = sessionStorage.getItem("userdata"); |
||||||
this.userMenu=JSON.parse(a).menus |
this.userMenu = JSON.parse(a).menus; |
||||||
console.log(this.userMenu); |
|
||||||
for (let index = 0; index < this.userMenu.length; index++) { |
for (let index = 0; index < this.userMenu.length; index++) { |
||||||
let a=this.userMenu[index].name |
let a = this.userMenu[index].name; |
||||||
this.tap.push(a) |
this.tap.push(a); |
||||||
|
|
||||||
} |
} |
||||||
console.log(this.tap); |
|
||||||
|
|
||||||
if (this.userMenu.length == 0) { |
if (this.userMenu.length == 0) { |
||||||
this.menu=this.menuList |
this.menu = this.menuList; |
||||||
} else { |
} else { |
||||||
for (let index = 0; index < this.menuList.length; index++) { |
for (let index = 0; index < this.menuList.length; index++) { |
||||||
|
|
||||||
for (let k = 0; k < this.tap.length; k++) { |
for (let k = 0; k < this.tap.length; k++) { |
||||||
if (this.tap[k] == this.menuList[index]) { |
if (this.tap[k] == this.menuList[index]) { |
||||||
this.menu.push(this.tap[k])
|
this.menu.push(this.tap[k]); |
||||||
console.log(this.menu); |
console.log(this.menu); |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
} |
} |
||||||
this.selectedMenu = this.menu[0] |
if (this.router.url.indexOf("oliunloadinglist") !== -1) { |
||||||
this.routerChange() |
this.selectedMenu = "卸油统计"; |
||||||
|
} else { |
||||||
|
this.selectedMenu = this.menu[0]; |
||||||
|
} |
||||||
|
|
||||||
|
// this.selectedMenu = this.menu[0];
|
||||||
|
this.routerChange(); |
||||||
} |
} |
||||||
|
|
||||||
selectMenu(item) { |
selectMenu(item) { |
||||||
if (this.selectedMenu == item) { |
if (this.selectedMenu == item) { |
||||||
return |
return; |
||||||
} |
} |
||||||
this.isEcharts = true |
this.isEcharts = true; |
||||||
this.selectedMenu = item |
this.selectedMenu = item; |
||||||
this.routerChange() |
this.routerChange(); |
||||||
} |
} |
||||||
|
|
||||||
routerChange() { |
routerChange() { |
||||||
if (sessionStorage.getItem('isGasStation') == 'false') { |
if ( |
||||||
if (this.selectedMenu == '预警类型统计') { |
sessionStorage.getItem("isGasStation") == "false" || |
||||||
this.router.navigate(['/records_nav/all']) |
sessionStorage.getItem("isZT") == "true" |
||||||
} else if (this.selectedMenu == '卸油统计') { |
) { |
||||||
this.router.navigate(['/records_nav/oliunloadinglist']) |
if (this.selectedMenu == "预警类型统计") { |
||||||
} else if (this.selectedMenu == '证照预警统计') { |
this.router.navigate(["/records_nav/all"]); |
||||||
this.router.navigate(['/records_nav/warningstatisticslist']) |
} else if (this.selectedMenu == "卸油统计") { |
||||||
|
this.router.navigate(["/records_nav/oliunloadinglist"]); |
||||||
|
} else if (this.selectedMenu == "证照预警统计") { |
||||||
|
this.router.navigate(["/records_nav/warningstatisticslist"]); |
||||||
} |
} |
||||||
} else { |
} else { |
||||||
if (this.selectedMenu == '预警类型统计') { |
if (this.selectedMenu == "预警类型统计") { |
||||||
this.router.navigate(['/records_nav/petrolStation/all']) |
this.router.navigate(["/records_nav/petrolStation/all"]); |
||||||
} else if (this.selectedMenu == '卸油统计') { |
} else if (this.selectedMenu == "卸油统计") { |
||||||
this.router.navigate(['/records_nav/petrolStation/oliunloadinglist']) |
this.router.navigate(["/records_nav/petrolStation/oliunloadinglist"]); |
||||||
} else if (this.selectedMenu == '证照预警统计') { |
} else if (this.selectedMenu == "证照预警统计") { |
||||||
this.router.navigate(['/records_nav/petrolStation/warningstatisticslist']) |
this.router.navigate([ |
||||||
|
"/records_nav/petrolStation/warningstatisticslist", |
||||||
|
]); |
||||||
} |
} |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
} |
} |
||||||
|
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,405 @@ |
|||||||
|
import { HttpClient } from "@angular/common/http"; |
||||||
|
import { ActivatedRoute, Router } from "@angular/router"; |
||||||
|
import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core"; |
||||||
|
import { FormBuilder, FormGroup } from "@angular/forms"; |
||||||
|
import { NzFormatEmitEvent } from "ng-zorro-antd/tree"; |
||||||
|
import { TreeService } from "src/app/service/tree.service"; |
||||||
|
import { NzMessageService } from "ng-zorro-antd/message"; |
||||||
|
@Component({ |
||||||
|
selector: "app-singlelogin", |
||||||
|
templateUrl: "./singlelogin.component.html", |
||||||
|
styleUrls: ["./singlelogin.component.scss"], |
||||||
|
}) |
||||||
|
export class SingleloginComponent implements OnInit { |
||||||
|
constructor( |
||||||
|
public route: ActivatedRoute, |
||||||
|
private fb: FormBuilder, |
||||||
|
private http: HttpClient, |
||||||
|
private toTree: TreeService, |
||||||
|
private router: Router, |
||||||
|
private message: NzMessageService |
||||||
|
) {} |
||||||
|
|
||||||
|
sinToken; |
||||||
|
pageType; |
||||||
|
async ngOnInit(): Promise<void> { |
||||||
|
console.log("查询参数", this.route.snapshot.queryParams.page); |
||||||
|
this.pageType = this.route.snapshot.queryParams.page; |
||||||
|
|
||||||
|
let token = this.getCookie("SAG_USER_TOKEN"); |
||||||
|
if (!token) { |
||||||
|
alert("未获取到token!"); |
||||||
|
return; |
||||||
|
} else { |
||||||
|
token = token.replace(/%3D/g, "="); |
||||||
|
this.sinToken = token; |
||||||
|
await this.getCurrentUserInfo(); |
||||||
|
await this.getAuthOrganInfos(); |
||||||
|
if (this.CurrentUserInfo && this.AuthOrganInfos) { |
||||||
|
this.SinochemLogin(); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//设置cookie
|
||||||
|
setCookie(obj) { |
||||||
|
for (let key in obj) { |
||||||
|
document.cookie = key + "=" + obj[key]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//读取cookie
|
||||||
|
getCookie(key) { |
||||||
|
console.log( |
||||||
|
document.cookie.match(new RegExp("(^|\\s)" + key + "=([^;]+)(;|$)")) |
||||||
|
); |
||||||
|
let arr = document.cookie.match( |
||||||
|
new RegExp("(^|\\s)" + key + "=([^;]+)(;|$)") |
||||||
|
); |
||||||
|
if (arr && arr.length !== 0) { |
||||||
|
return document.cookie.match( |
||||||
|
new RegExp("(^|\\s)" + key + "=([^;]+)(;|$)") |
||||||
|
)[2]; |
||||||
|
} else { |
||||||
|
return null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
//删除cookie
|
||||||
|
removeCookie(key) { |
||||||
|
this.setCookie({ [key]: "" }); |
||||||
|
} |
||||||
|
|
||||||
|
CurrentUserInfo; |
||||||
|
AuthOrganInfos; |
||||||
|
//获取当前登录用户信息
|
||||||
|
getCurrentUserInfo() { |
||||||
|
return new Promise<void>((resolve, reject) => { |
||||||
|
this.http |
||||||
|
.get("/sagframe-portal/p3p/auth/getCurrentUserInfo", { |
||||||
|
params: { |
||||||
|
token: this.sinToken, |
||||||
|
}, |
||||||
|
}) |
||||||
|
.subscribe( |
||||||
|
(data: any) => { |
||||||
|
this.CurrentUserInfo = data; |
||||||
|
console.log("当前登录用户信息", this.CurrentUserInfo); |
||||||
|
resolve(); |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
alert("请求中台接口失败"); |
||||||
|
reject(); |
||||||
|
} |
||||||
|
); |
||||||
|
}); |
||||||
|
} |
||||||
|
//获取当前登录用户授权机构
|
||||||
|
getAuthOrganInfos() { |
||||||
|
return new Promise<void>((resolve, reject) => { |
||||||
|
this.http |
||||||
|
.get("/sagframe-portal/p3p/auth/getAuthOrganInfos", { |
||||||
|
params: { |
||||||
|
token: this.sinToken, |
||||||
|
}, |
||||||
|
headers: { |
||||||
|
resId: |
||||||
|
this.pageType == "ai" |
||||||
|
? "1724119213161666287118" |
||||||
|
: "1724119243583142965118", |
||||||
|
}, |
||||||
|
}) |
||||||
|
.subscribe( |
||||||
|
(data: any) => { |
||||||
|
this.AuthOrganInfos = data; |
||||||
|
console.log("当前登录用户授权机构", this.CurrentUserInfo); |
||||||
|
resolve(); |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
alert("请求中台接口失败"); |
||||||
|
reject(); |
||||||
|
} |
||||||
|
); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
downloadAsTxt(obj) { |
||||||
|
// 将对象转换为 JSON 字符串
|
||||||
|
const jsonString = JSON.stringify(obj, null, 2); |
||||||
|
|
||||||
|
// 创建 Blob 对象
|
||||||
|
const blob = new Blob([jsonString], { type: "text/plain" }); |
||||||
|
|
||||||
|
// 创建下载链接
|
||||||
|
const link = document.createElement("a"); |
||||||
|
link.href = URL.createObjectURL(blob); |
||||||
|
link.download = "错误参数.txt"; // 文件名为 data.txt
|
||||||
|
link.click(); // 触发下载
|
||||||
|
// 释放 URL 对象
|
||||||
|
URL.revokeObjectURL(link.href); |
||||||
|
} |
||||||
|
|
||||||
|
//中化用户登录获得自己的token信息
|
||||||
|
SinochemLogin() { |
||||||
|
return new Promise<void>((resolve, reject) => { |
||||||
|
this.CurrentUserInfo.data.userId = this.CurrentUserInfo.data.id; |
||||||
|
delete this.CurrentUserInfo.data.id; |
||||||
|
delete this.CurrentUserInfo.data.permissions; |
||||||
|
let body = { |
||||||
|
user: this.CurrentUserInfo.data, |
||||||
|
org: this.AuthOrganInfos.data[0], |
||||||
|
sinochemOrgs: this.AuthOrganInfos.data, |
||||||
|
userDetail: JSON.stringify(this.CurrentUserInfo.data), |
||||||
|
}; |
||||||
|
this.http.post("/api/TokenAuth/SinochemLogin", body).subscribe( |
||||||
|
(data: any) => { |
||||||
|
sessionStorage.setItem("isZT", "true"); |
||||||
|
if (this.pageType == "ai") { |
||||||
|
this.enterPage(data); |
||||||
|
} else if (this.pageType == "comprehensive") { |
||||||
|
this.enterComprehensive(data); |
||||||
|
} else { |
||||||
|
this.enterPageSystem(data); |
||||||
|
} |
||||||
|
resolve(); |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
this.downloadAsTxt(body); |
||||||
|
alert(err?.error?.error?.message || "SinochemLogin接口请求失败"); |
||||||
|
reject(); |
||||||
|
} |
||||||
|
); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
enterPageSystem(tokenData) { |
||||||
|
sessionStorage.setItem("token", tokenData.result.accessToken); |
||||||
|
sessionStorage.setItem( |
||||||
|
"encryptedAccessToken", |
||||||
|
tokenData.result.encryptedAccessToken |
||||||
|
); |
||||||
|
this.http |
||||||
|
.get("/api/services/app/Session/GetCurrentLoginInformations") |
||||||
|
.subscribe( |
||||||
|
async (data: any) => { |
||||||
|
console.log("当前登录账号的信息", data.result); |
||||||
|
sessionStorage.setItem("userdata", JSON.stringify(data.result.user)); |
||||||
|
sessionStorage.setItem( |
||||||
|
"userdataOfgasstation", |
||||||
|
JSON.stringify(data.result.user) |
||||||
|
); |
||||||
|
if (data.result.user.menus.length == 0) { |
||||||
|
alert("当前用户未分配菜单"); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (!data.result.user.organization) { |
||||||
|
alert("当前用户没有组织机构信息"); |
||||||
|
return; |
||||||
|
} |
||||||
|
// if (data.result.user.organization.isGasStation) {
|
||||||
|
// alert("油站用户无系统管理权限");
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
//跳转页面
|
||||||
|
this.toPageSystem(); |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
alert("获取用户信息错误"); |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
menu3 = [ |
||||||
|
{ name: "组织机构管理", url: "/system/organization" }, |
||||||
|
{ name: "用户管理", url: "/system/user" }, |
||||||
|
{ name: "角色管理", url: "/system/role" }, |
||||||
|
{ name: "分析主机管理", url: "/system/host" }, |
||||||
|
{ name: "推送管理", url: "/system/push" }, |
||||||
|
{ name: "经营类证照管理", url: "/system/updateOfLicense" }, |
||||||
|
{ name: "资产类证照管理", url: "/system/fileOfLicense" }, |
||||||
|
{ name: "菜单管理", url: "/system/menu" }, |
||||||
|
]; |
||||||
|
userMenu = []; |
||||||
|
tap = []; |
||||||
|
menuList2 = []; |
||||||
|
toPageSystem() { |
||||||
|
let a = sessionStorage.getItem("userdata"); |
||||||
|
this.userMenu = JSON.parse(a).menus; |
||||||
|
for (let index = 0; index < this.userMenu.length; index++) { |
||||||
|
let a = this.userMenu[index].name; |
||||||
|
this.tap.push(a); |
||||||
|
} |
||||||
|
for (let index = 0; index < this.menu3.length; index++) { |
||||||
|
for (let k = 0; k < this.tap.length; k++) { |
||||||
|
if (this.tap[k] == this.menu3[index].name) { |
||||||
|
this.menuList2.push(this.menu3[index]); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
if (this.menuList2.length == 0) { |
||||||
|
this.message.create("warning", "未分配系统管理菜单"); |
||||||
|
return; |
||||||
|
} else { |
||||||
|
this.router.navigate([this.menuList2[0].url]); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
enterPage(tokenData) { |
||||||
|
sessionStorage.setItem("token", tokenData.result.accessToken); |
||||||
|
sessionStorage.setItem( |
||||||
|
"encryptedAccessToken", |
||||||
|
tokenData.result.encryptedAccessToken |
||||||
|
); |
||||||
|
this.http |
||||||
|
.get("/api/services/app/Session/GetCurrentLoginInformations") |
||||||
|
.subscribe( |
||||||
|
async (data: any) => { |
||||||
|
console.log("当前登录账号的信息", data.result); |
||||||
|
sessionStorage.setItem("userdata", JSON.stringify(data.result.user)); |
||||||
|
sessionStorage.setItem( |
||||||
|
"userdataOfgasstation", |
||||||
|
JSON.stringify(data.result.user) |
||||||
|
); |
||||||
|
|
||||||
|
if (data.result.user.menus.length == 0) { |
||||||
|
alert("当前用户未分配菜单"); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (!data.result.user.organization) { |
||||||
|
alert("当前用户没有组织机构信息"); |
||||||
|
return; |
||||||
|
} |
||||||
|
if (data.result.user.organization.isGasStation) { |
||||||
|
await this.getGasStationBaseInfo(); |
||||||
|
// if (
|
||||||
|
// data.result.user.menus[0].name == "数字油站" &&
|
||||||
|
// data.result.user.menus.length == 1 &&
|
||||||
|
// !this.init3D
|
||||||
|
// ) {
|
||||||
|
// this.message.create(
|
||||||
|
// "error",
|
||||||
|
// `当前用户油站未开通3D且仅分配油站菜单`
|
||||||
|
// );
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
} |
||||||
|
|
||||||
|
//跳转页面
|
||||||
|
this.toPage(data); |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
alert("获取用户信息错误"); |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
enterComprehensive(tokenData) { |
||||||
|
sessionStorage.setItem("token", tokenData.result.accessToken); |
||||||
|
sessionStorage.setItem( |
||||||
|
"encryptedAccessToken", |
||||||
|
tokenData.result.encryptedAccessToken |
||||||
|
); |
||||||
|
this.http |
||||||
|
.get("/api/services/app/Session/GetCurrentLoginInformations") |
||||||
|
.subscribe( |
||||||
|
async (data: any) => { |
||||||
|
sessionStorage.setItem("userdata", JSON.stringify(data.result.user)); |
||||||
|
sessionStorage.setItem( |
||||||
|
"userdataOfgasstation", |
||||||
|
JSON.stringify(data.result.user) |
||||||
|
); |
||||||
|
//跳转页面
|
||||||
|
sessionStorage.setItem("isGasStation", "false"); |
||||||
|
this.router.navigate(["/comprehensive"]); |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
alert("获取用户信息错误"); |
||||||
|
} |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
menu1 = [ |
||||||
|
{ name: "首页", url: "/homepage" }, |
||||||
|
{ name: "数字油站", url: "/plan" }, |
||||||
|
{ name: "今日预警", url: "/todaywarning" }, |
||||||
|
{ name: "预警记录", url: "/records_nav" }, |
||||||
|
{ name: "证照管理", url: "/audit" }, |
||||||
|
]; |
||||||
|
menu2 = [ |
||||||
|
{ name: "数字油站", url: "/plan" }, |
||||||
|
{ name: "今日预警", url: "/todaywarning" }, |
||||||
|
{ name: "预警记录", url: "/records_nav" }, |
||||||
|
{ name: "证照管理", url: "/audit" }, |
||||||
|
]; |
||||||
|
init3D; |
||||||
|
async getGasStationBaseInfo() { |
||||||
|
await new Promise((resolve, reject) => { |
||||||
|
let params = { |
||||||
|
organizationUnitId: JSON.parse( |
||||||
|
sessionStorage.getItem("userdataOfgasstation") |
||||||
|
).organization.id, |
||||||
|
}; |
||||||
|
this.http |
||||||
|
.get("/api/services/app/GasStation/Get", { params: params }) |
||||||
|
.subscribe((data: any) => { |
||||||
|
resolve(data.result); |
||||||
|
|
||||||
|
sessionStorage.setItem("3dSceneData", JSON.stringify(data.result)); |
||||||
|
this.init3D = data.result.hasBuildingInfo; |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
toPage(data) { |
||||||
|
if (data.result.user.organization.isGasStation) { |
||||||
|
sessionStorage.setItem("isGasStation", "true"); |
||||||
|
let userdata = sessionStorage.getItem("userdataOfgasstation"); |
||||||
|
let menuList = this.returnLastMenus(userdata, this.menu2); |
||||||
|
let isTrue = menuList.find((item) => { |
||||||
|
return item.name == "今日预警"; |
||||||
|
}); |
||||||
|
if (isTrue) { |
||||||
|
this.router.navigate(["/todaywarning"]); |
||||||
|
sessionStorage.setItem("selectedMenu", "今日预警"); |
||||||
|
} else if (menuList.length == 0) { |
||||||
|
return this.message.create("warning", `当前用户未分配菜单`); |
||||||
|
} else { |
||||||
|
this.router.navigate([menuList[0].url]); |
||||||
|
sessionStorage.setItem("selectedMenu", menuList[0].name); |
||||||
|
} |
||||||
|
} else { |
||||||
|
sessionStorage.setItem("isGasStation", "false"); |
||||||
|
let a = sessionStorage.getItem("userdata"); |
||||||
|
let menuList = this.returnLastMenus(a, this.menu1); |
||||||
|
let isTrue = menuList.find((item) => { |
||||||
|
return item.name == "首页"; |
||||||
|
}); |
||||||
|
if (menuList.length == 0) { |
||||||
|
return this.message.create("warning", `当前用户未分配菜单`); |
||||||
|
} |
||||||
|
if (isTrue) { |
||||||
|
this.router.navigate(["/homepage"]); |
||||||
|
sessionStorage.setItem("selectedMenu", "首页"); |
||||||
|
} else { |
||||||
|
this.router.navigate([menuList[0].url]); |
||||||
|
sessionStorage.setItem("selectedMenu", menuList[0].name); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
returnLastMenus(data, originalMenus) { |
||||||
|
let userMenu = JSON.parse(data).menus; |
||||||
|
let tap = []; |
||||||
|
let menuList = []; |
||||||
|
for (let index = 0; index < userMenu.length; index++) { |
||||||
|
let a = userMenu[index].name; |
||||||
|
tap.push(a); |
||||||
|
} |
||||||
|
for (let index = 0; index < originalMenus.length; index++) { |
||||||
|
for (let k = 0; k < tap.length; k++) { |
||||||
|
if (tap[k] == originalMenus[index].name) { |
||||||
|
menuList.push(originalMenus[index]); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
return menuList; |
||||||
|
} |
||||||
|
} |
@ -1,13 +1,12 @@ |
|||||||
import { Injectable } from '@angular/core'; |
import { Injectable } from "@angular/core"; |
||||||
|
|
||||||
@Injectable({ |
@Injectable({ |
||||||
providedIn: 'root' |
providedIn: "root", |
||||||
}) |
}) |
||||||
export class PatternService { |
export class PatternService { |
||||||
static isProd: any = true; |
static isProd: any = true; |
||||||
|
|
||||||
constructor() {} |
constructor() {} |
||||||
|
|
||||||
public isProd: boolean = true //是否是生产环境
|
public isProd: boolean = true; //是否是生产环境
|
||||||
|
|
||||||
} |
} |
||||||
|
@ -1,284 +1,326 @@ |
|||||||
import { HttpClient } from '@angular/common/http'; |
import { HttpClient } from "@angular/common/http"; |
||||||
import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core'; |
import { |
||||||
import { TreeService } from 'src/app/service/tree.service'; |
Component, |
||||||
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree'; |
OnInit, |
||||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
AfterViewInit, |
||||||
import { NzModalService } from 'ng-zorro-antd/modal'; |
ViewChild, |
||||||
import { NzMessageService } from 'ng-zorro-antd/message'; |
ViewContainerRef, |
||||||
import { AddhostComponent } from './addhost/addhost.component'; |
} from "@angular/core"; |
||||||
import { AddcameraComponent } from './addcamera/addcamera.component'; |
import { TreeService } from "src/app/service/tree.service"; |
||||||
import { EdithostComponent } from './edithost/edithost.component'; |
import { |
||||||
import { EditcameraComponent } from './editcamera/editcamera.component'; |
NzFormatEmitEvent, |
||||||
|
NzTreeComponent, |
||||||
|
NzTreeNodeOptions, |
||||||
|
} from "ng-zorro-antd/tree"; |
||||||
|
import { FormBuilder, FormGroup, Validators } from "@angular/forms"; |
||||||
|
import { NzModalService } from "ng-zorro-antd/modal"; |
||||||
|
import { NzMessageService } from "ng-zorro-antd/message"; |
||||||
|
import { AddhostComponent } from "./addhost/addhost.component"; |
||||||
|
import { AddcameraComponent } from "./addcamera/addcamera.component"; |
||||||
|
import { EdithostComponent } from "./edithost/edithost.component"; |
||||||
|
import { EditcameraComponent } from "./editcamera/editcamera.component"; |
||||||
@Component({ |
@Component({ |
||||||
selector: 'app-analysis-of-the-host', |
selector: "app-analysis-of-the-host", |
||||||
templateUrl: './analysis-of-the-host.component.html', |
templateUrl: "./analysis-of-the-host.component.html", |
||||||
styleUrls: ['./analysis-of-the-host.component.scss'] |
styleUrls: ["./analysis-of-the-host.component.scss"], |
||||||
}) |
}) |
||||||
export class AnalysisOfTheHostComponent implements OnInit { |
export class AnalysisOfTheHostComponent implements OnInit { |
||||||
|
constructor( |
||||||
constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { } |
private fb: FormBuilder, |
||||||
|
private http: HttpClient, |
||||||
|
private toTree: TreeService, |
||||||
|
private modal: NzModalService, |
||||||
|
private message: NzMessageService, |
||||||
|
private viewContainerRef: ViewContainerRef |
||||||
|
) {} |
||||||
ngOnInit(): void { |
ngOnInit(): void { |
||||||
this.getAllOrganization() |
this.getAllOrganization(); |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
//获取所有组织机构
|
//获取所有组织机构
|
||||||
searchValue = ''; |
searchValue = ""; |
||||||
nzExpandAll = false; |
nzExpandAll = false; |
||||||
totalCount: string |
totalCount: string; |
||||||
getAllOrganization() { |
getAllOrganization() { |
||||||
let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id |
let userData = null; |
||||||
|
if (sessionStorage.getItem("isGasStation") == "true") { |
||||||
|
userData = JSON.parse(sessionStorage.getItem("userdataOfgasstation")); |
||||||
|
} else { |
||||||
|
userData = JSON.parse(sessionStorage.getItem("userdata")); |
||||||
|
} |
||||||
|
let OrganizationUnitId = userData.organization.id; |
||||||
|
let OrganizationUnitIds = userData.organizations?.map((v) => v.id); |
||||||
let params = { |
let params = { |
||||||
OrganizationUnitId: OrganizationUnitId, |
IsContainsChildren: "true", |
||||||
IsContainsChildren: "true" |
}; |
||||||
|
this.http |
||||||
|
.get("/api/services/app/Organization/GetAll", { |
||||||
|
params: params, |
||||||
|
}) |
||||||
|
.subscribe((data: any) => { |
||||||
|
this.totalCount = data.result.totalCount; |
||||||
|
data.result.items.forEach((element) => { |
||||||
|
if (OrganizationUnitIds && OrganizationUnitIds.length !== 0) { |
||||||
|
if (OrganizationUnitIds.includes(element.id)) { |
||||||
|
element.parentId = null; |
||||||
} |
} |
||||||
this.http.get('/api/services/app/Organization/GetAll', { |
} else { |
||||||
params: params |
|
||||||
}).subscribe((data: any) => { |
|
||||||
this.totalCount = data.result.totalCount |
|
||||||
data.result.items.forEach(element => { |
|
||||||
if (element.id == OrganizationUnitId) { |
if (element.id == OrganizationUnitId) { |
||||||
element.parentId = null |
element.parentId = null; |
||||||
} |
} |
||||||
element.key = element.id |
} |
||||||
element.title = element.displayName |
element.key = element.id; |
||||||
element.selectable = false |
element.title = element.displayName; |
||||||
|
element.selectable = false; |
||||||
|
}); |
||||||
|
this.nodes = [...this.toTree.toTree(data.result.items)]; |
||||||
|
this.defaultExpandedKeys = [this.nodes[0].id]; |
||||||
|
this.defaultExpandedKeys = [...this.defaultExpandedKeys]; |
||||||
}); |
}); |
||||||
this.nodes = [...this.toTree.toTree(data.result.items)] |
|
||||||
this.defaultExpandedKeys = [this.nodes[0].id] |
|
||||||
this.defaultExpandedKeys = [...this.defaultExpandedKeys] |
|
||||||
}) |
|
||||||
} |
} |
||||||
|
|
||||||
|
@ViewChild("nzTreeComponent", { static: false }) |
||||||
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; |
nzTreeComponent!: NzTreeComponent; |
||||||
|
|
||||||
defaultExpandedKeys = []; |
defaultExpandedKeys = []; |
||||||
|
|
||||||
nodes: any[] = [] |
nodes: any[] = []; |
||||||
nzSelectedKeys: any[] = [] |
nzSelectedKeys: any[] = []; |
||||||
selectedOilStation: any |
selectedOilStation: any; |
||||||
nzClick(event: NzFormatEmitEvent): void { |
nzClick(event: NzFormatEmitEvent): void { |
||||||
console.log(event.node.origin); |
console.log(event.node.origin); |
||||||
if (event.node.origin.isGasStation) {//如果点击的是加油站才生效
|
if (event.node.origin.isGasStation) { |
||||||
this.nzSelectedKeys[0] = event.node.origin.id |
//如果点击的是加油站才生效
|
||||||
this.nzSelectedKeys = [...this.nzSelectedKeys] |
this.nzSelectedKeys[0] = event.node.origin.id; |
||||||
this.selectedOilStation = event.node.origin |
this.nzSelectedKeys = [...this.nzSelectedKeys]; |
||||||
this.getHost() |
this.selectedOilStation = event.node.origin; |
||||||
this.getCamera() |
this.getHost(); |
||||||
|
this.getCamera(); |
||||||
} else { |
} else { |
||||||
this.message.info('只有加油站才可以增加主机'); |
this.message.info("只有加油站才可以增加主机"); |
||||||
} |
} |
||||||
} |
} |
||||||
|
|
||||||
//获得加油站的主机
|
//获得加油站的主机
|
||||||
listOfData: any[] = []; |
listOfData: any[] = []; |
||||||
getHost() { |
getHost() { |
||||||
this.http.get('/api/services/app/EdgeDevice/GetAll', { |
this.http |
||||||
|
.get("/api/services/app/EdgeDevice/GetAll", { |
||||||
params: { |
params: { |
||||||
organizationUnitId: this.selectedOilStation.id, |
organizationUnitId: this.selectedOilStation.id, |
||||||
SkipCount: '0', |
SkipCount: "0", |
||||||
MaxResultCount: '100', |
MaxResultCount: "100", |
||||||
} |
}, |
||||||
}).subscribe((data: any) => { |
|
||||||
console.log('主机列表', data.result.items) |
|
||||||
this.listOfData = data.result.items |
|
||||||
}) |
}) |
||||||
|
.subscribe((data: any) => { |
||||||
|
console.log("主机列表", data.result.items); |
||||||
|
this.listOfData = data.result.items; |
||||||
|
}); |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
//获得加油站摄像头
|
//获得加油站摄像头
|
||||||
listOfDataCamera: any[] = []; |
listOfDataCamera: any[] = []; |
||||||
getCamera() { |
getCamera() { |
||||||
this.http.get('/api/services/app/Camera/GetAll', { |
this.http |
||||||
|
.get("/api/services/app/Camera/GetAll", { |
||||||
params: { |
params: { |
||||||
organizationUnitId: this.selectedOilStation.id, |
organizationUnitId: this.selectedOilStation.id, |
||||||
SkipCount: '0', |
SkipCount: "0", |
||||||
MaxResultCount: '100', |
MaxResultCount: "100", |
||||||
} |
}, |
||||||
}).subscribe((data: any) => { |
|
||||||
// console.log('摄像头列表', data)
|
|
||||||
this.listOfDataCamera = data.result.items |
|
||||||
}) |
}) |
||||||
|
.subscribe((data: any) => { |
||||||
|
// console.log('摄像头列表', data)
|
||||||
|
this.listOfDataCamera = data.result.items; |
||||||
|
}); |
||||||
} |
} |
||||||
|
|
||||||
|
ngAfterViewInit(): void {} |
||||||
ngAfterViewInit(): void { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
//新增分析主机
|
//新增分析主机
|
||||||
addHost() { |
addHost() { |
||||||
console.log(this.selectedOilStation) |
console.log(this.selectedOilStation); |
||||||
const modal = this.modal.create({ |
const modal = this.modal.create({ |
||||||
nzTitle: '新增加油站主机', |
nzTitle: "新增加油站主机", |
||||||
nzContent: AddhostComponent, |
nzContent: AddhostComponent, |
||||||
nzViewContainerRef: this.viewContainerRef, |
nzViewContainerRef: this.viewContainerRef, |
||||||
nzWidth: 288, |
nzWidth: 288, |
||||||
nzComponentParams: {}, |
nzComponentParams: {}, |
||||||
nzOnOk: async () => { |
nzOnOk: async () => { |
||||||
if (instance.validateForm.valid) { |
if (instance.validateForm.valid) { |
||||||
await new Promise(resolve => { |
await new Promise((resolve) => { |
||||||
console.log('表单信息', instance.validateForm) |
console.log("表单信息", instance.validateForm); |
||||||
let body = { |
let body = { |
||||||
hostIPAddress: instance.validateForm.value.ip, |
hostIPAddress: instance.validateForm.value.ip, |
||||||
organizationUnitId: this.selectedOilStation.id |
organizationUnitId: this.selectedOilStation.id, |
||||||
} |
}; |
||||||
this.http.post('/api/services/app/EdgeDevice/Create', body).subscribe(data => { |
this.http |
||||||
resolve(data) |
.post("/api/services/app/EdgeDevice/Create", body) |
||||||
this.message.create('success', '创建成功!'); |
.subscribe((data) => { |
||||||
this.getHost() |
resolve(data); |
||||||
return true |
this.message.create("success", "创建成功!"); |
||||||
}) |
this.getHost(); |
||||||
}) |
return true; |
||||||
|
}); |
||||||
|
}); |
||||||
} else { |
} else { |
||||||
this.message.create('warning', '请填写完整!'); |
this.message.create("warning", "请填写完整!"); |
||||||
return false |
return false; |
||||||
} |
|
||||||
} |
} |
||||||
|
}, |
||||||
}); |
}); |
||||||
const instance = modal.getContentComponent(); |
const instance = modal.getContentComponent(); |
||||||
} |
} |
||||||
edit(data) { |
edit(data) { |
||||||
console.log(data) |
console.log(data); |
||||||
const modal = this.modal.create({ |
const modal = this.modal.create({ |
||||||
nzTitle: '编辑加油站主机', |
nzTitle: "编辑加油站主机", |
||||||
nzContent: EdithostComponent, |
nzContent: EdithostComponent, |
||||||
nzViewContainerRef: this.viewContainerRef, |
nzViewContainerRef: this.viewContainerRef, |
||||||
nzWidth: 288, |
nzWidth: 288, |
||||||
nzComponentParams: { |
nzComponentParams: { |
||||||
ip: data.hostIPAddress |
ip: data.hostIPAddress, |
||||||
}, |
}, |
||||||
nzOnOk: async () => { |
nzOnOk: async () => { |
||||||
if (instance.validateForm.valid) { |
if (instance.validateForm.valid) { |
||||||
await new Promise(resolve => { |
await new Promise((resolve) => { |
||||||
console.log('表单信息', instance.validateForm) |
console.log("表单信息", instance.validateForm); |
||||||
data.hostIPAddress = instance.validateForm.value.ip, |
(data.hostIPAddress = instance.validateForm.value.ip), |
||||||
this.http.put('/api/services/app/EdgeDevice/Update', data).subscribe(data => { |
this.http |
||||||
resolve(data) |
.put("/api/services/app/EdgeDevice/Update", data) |
||||||
this.message.create('success', '修改成功!'); |
.subscribe((data) => { |
||||||
this.getHost() |
resolve(data); |
||||||
return true |
this.message.create("success", "修改成功!"); |
||||||
}) |
this.getHost(); |
||||||
}) |
return true; |
||||||
|
}); |
||||||
|
}); |
||||||
} else { |
} else { |
||||||
this.message.create('warning', '请填写完整!'); |
this.message.create("warning", "请填写完整!"); |
||||||
return false |
return false; |
||||||
} |
|
||||||
} |
} |
||||||
|
}, |
||||||
}); |
}); |
||||||
const instance = modal.getContentComponent(); |
const instance = modal.getContentComponent(); |
||||||
} |
} |
||||||
delete(item) { |
delete(item) { |
||||||
console.log(item) |
console.log(item); |
||||||
this.modal.confirm({ |
this.modal.confirm({ |
||||||
nzTitle: `确定要删除${item.name}这个主机吗?`, |
nzTitle: `确定要删除${item.name}这个主机吗?`, |
||||||
nzOkText: '确定', |
nzOkText: "确定", |
||||||
nzOkType: 'primary', |
nzOkType: "primary", |
||||||
nzOnOk: () => { |
nzOnOk: () => { |
||||||
this.http.delete('/api/services/app/EdgeDevice/Delete', { |
this.http |
||||||
|
.delete("/api/services/app/EdgeDevice/Delete", { |
||||||
params: { |
params: { |
||||||
Id: item.id |
Id: item.id, |
||||||
} |
}, |
||||||
}).subscribe(data => { |
|
||||||
this.message.create('success', '删除成功!'); |
|
||||||
this.getHost() |
|
||||||
}) |
}) |
||||||
|
.subscribe((data) => { |
||||||
|
this.message.create("success", "删除成功!"); |
||||||
|
this.getHost(); |
||||||
|
}); |
||||||
}, |
}, |
||||||
nzCancelText: '取消' |
nzCancelText: "取消", |
||||||
}); |
}); |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
//摄像头
|
//摄像头
|
||||||
addCamera() { |
addCamera() { |
||||||
console.log(this.selectedOilStation) |
console.log(this.selectedOilStation); |
||||||
const modal = this.modal.create({ |
const modal = this.modal.create({ |
||||||
nzTitle: '新增加油站摄像头', |
nzTitle: "新增加油站摄像头", |
||||||
nzContent: AddcameraComponent, |
nzContent: AddcameraComponent, |
||||||
nzViewContainerRef: this.viewContainerRef, |
nzViewContainerRef: this.viewContainerRef, |
||||||
nzWidth: 288, |
nzWidth: 288, |
||||||
nzComponentParams: {}, |
nzComponentParams: {}, |
||||||
nzOnOk: async () => { |
nzOnOk: async () => { |
||||||
if (instance.validateForm.valid) { |
if (instance.validateForm.valid) { |
||||||
await new Promise(resolve => { |
await new Promise((resolve) => { |
||||||
console.log('表单信息', instance.validateForm) |
console.log("表单信息", instance.validateForm); |
||||||
let body = { |
let body = { |
||||||
organizationUnitId: this.selectedOilStation.id, |
organizationUnitId: this.selectedOilStation.id, |
||||||
ipAdress: instance.validateForm.value.ip, |
ipAdress: instance.validateForm.value.ip, |
||||||
code: instance.validateForm.value.code, |
code: instance.validateForm.value.code, |
||||||
name: instance.validateForm.value.name, |
name: instance.validateForm.value.name, |
||||||
// description: "",
|
// description: "",
|
||||||
|
}; |
||||||
|
this.http.post("/api/services/app/Camera/Create", body).subscribe( |
||||||
|
(data) => { |
||||||
|
resolve(data); |
||||||
|
this.message.create("success", "创建成功!"); |
||||||
|
this.getCamera(); |
||||||
|
return true; |
||||||
|
}, |
||||||
|
(err) => { |
||||||
|
return false; |
||||||
} |
} |
||||||
this.http.post('/api/services/app/Camera/Create', body).subscribe(data => { |
); |
||||||
resolve(data) |
}); |
||||||
this.message.create('success', '创建成功!'); |
|
||||||
this.getCamera() |
|
||||||
return true |
|
||||||
}, err => { |
|
||||||
return false |
|
||||||
}) |
|
||||||
}) |
|
||||||
} else { |
} else { |
||||||
this.message.create('warning', '请填写完整!'); |
this.message.create("warning", "请填写完整!"); |
||||||
return false |
return false; |
||||||
} |
|
||||||
} |
} |
||||||
|
}, |
||||||
}); |
}); |
||||||
const instance = modal.getContentComponent(); |
const instance = modal.getContentComponent(); |
||||||
} |
} |
||||||
editCamera(data) { |
editCamera(data) { |
||||||
|
console.log(data); |
||||||
console.log(data) |
|
||||||
const modal = this.modal.create({ |
const modal = this.modal.create({ |
||||||
nzTitle: '编辑加油站摄像头', |
nzTitle: "编辑加油站摄像头", |
||||||
nzContent: EditcameraComponent, |
nzContent: EditcameraComponent, |
||||||
nzViewContainerRef: this.viewContainerRef, |
nzViewContainerRef: this.viewContainerRef, |
||||||
nzWidth: 288, |
nzWidth: 288, |
||||||
nzComponentParams: { |
nzComponentParams: { |
||||||
data: data |
data: data, |
||||||
}, |
}, |
||||||
nzOnOk: async () => { |
nzOnOk: async () => { |
||||||
if (instance.validateForm.valid) { |
if (instance.validateForm.valid) { |
||||||
await new Promise(resolve => { |
await new Promise((resolve) => { |
||||||
console.log('表单信息', instance.validateForm) |
console.log("表单信息", instance.validateForm); |
||||||
data.name = instance.validateForm.value.name |
data.name = instance.validateForm.value.name; |
||||||
data.code = instance.validateForm.value.code |
data.code = instance.validateForm.value.code; |
||||||
data.ipAdress = instance.validateForm.value.ip |
data.ipAdress = instance.validateForm.value.ip; |
||||||
this.http.put('/api/services/app/Camera/Update', data).subscribe(data => { |
this.http.put("/api/services/app/Camera/Update", data).subscribe( |
||||||
resolve(data) |
(data) => { |
||||||
this.message.create('success', '编辑成功!'); |
resolve(data); |
||||||
this.getCamera() |
this.message.create("success", "编辑成功!"); |
||||||
return true |
this.getCamera(); |
||||||
}, err => { |
return true; |
||||||
return false |
}, |
||||||
}) |
(err) => { |
||||||
}) |
return false; |
||||||
} else { |
|
||||||
this.message.create('warning', '请填写完整!'); |
|
||||||
return false |
|
||||||
} |
} |
||||||
|
); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.message.create("warning", "请填写完整!"); |
||||||
|
return false; |
||||||
} |
} |
||||||
|
}, |
||||||
}); |
}); |
||||||
const instance = modal.getContentComponent(); |
const instance = modal.getContentComponent(); |
||||||
} |
} |
||||||
deleteCamera(item) { |
deleteCamera(item) { |
||||||
console.log(item) |
console.log(item); |
||||||
this.modal.confirm({ |
this.modal.confirm({ |
||||||
nzTitle: `确定要删除${item.name}这个摄像头吗?`, |
nzTitle: `确定要删除${item.name}这个摄像头吗?`, |
||||||
nzOkText: '确定', |
nzOkText: "确定", |
||||||
nzOkType: 'primary', |
nzOkType: "primary", |
||||||
nzOnOk: () => { |
nzOnOk: () => { |
||||||
this.http.delete('/api/services/app/Camera/Delete', { |
this.http |
||||||
|
.delete("/api/services/app/Camera/Delete", { |
||||||
params: { |
params: { |
||||||
Id: item.id |
Id: item.id, |
||||||
} |
}, |
||||||
}).subscribe(data => { |
|
||||||
this.message.create('success', '删除成功!'); |
|
||||||
this.getCamera() |
|
||||||
}) |
}) |
||||||
|
.subscribe((data) => { |
||||||
|
this.message.create("success", "删除成功!"); |
||||||
|
this.getCamera(); |
||||||
|
}); |
||||||
}, |
}, |
||||||
nzCancelText: '取消' |
nzCancelText: "取消", |
||||||
}); |
}); |
||||||
} |
} |
||||||
} |
} |
||||||
|
@ -0,0 +1,35 @@ |
|||||||
|
<div class="orbox"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="righttop"> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" /> |
||||||
|
</nz-input-group> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="treeTitle"> |
||||||
|
<span>组织机构</span> |
||||||
|
<label nz-checkbox [(ngModel)]="IsContainsChildren" (ngModelChange)="getAllOrganization()">包含子节点</label> |
||||||
|
</div> |
||||||
|
<div class="treebox"> |
||||||
|
<nz-tree [nzHideUnMatched]='true' [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" |
||||||
|
[nzExpandedKeys]="defaultExpandedKeys" [nzTreeTemplate]="nzTreeTemplate" nzBlockNode |
||||||
|
[nzExpandedIcon]="multiExpandedIconTpl"> |
||||||
|
</nz-tree> |
||||||
|
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||||
|
<div class="nodebox"> |
||||||
|
<span class="name">{{ node.title }}</span> |
||||||
|
<div class="operation"> |
||||||
|
<span class="blueColor" (click)="okbinding(node)">绑定机构</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</ng-template> |
||||||
|
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||||
|
<ng-container *ngIf="node.children.length !== 0"> |
||||||
|
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" |
||||||
|
class="ant-tree-switcher-line-icon"></i> |
||||||
|
</ng-container> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
@ -0,0 +1,76 @@ |
|||||||
|
|
||||||
|
.orbox { |
||||||
|
width: 100%; |
||||||
|
max-height: 600px; |
||||||
|
overflow-y: auto; |
||||||
|
margin-right: 10px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
|
||||||
|
.treebox { |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
overflow: auto; |
||||||
|
flex-direction: column; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 10px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.topbox2 { |
||||||
|
width: 100%; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-top: 20px; |
||||||
|
|
||||||
|
.lefttop { |
||||||
|
height: 36px; |
||||||
|
line-height: 36px; |
||||||
|
color: #000; |
||||||
|
margin-right: 10px; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.righttop { |
||||||
|
flex: 1; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
nz-input-group { |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.treeTitle { |
||||||
|
width: 100%; |
||||||
|
height: 55px; |
||||||
|
line-height: 55px; |
||||||
|
margin-top: 12px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
color: #000d21; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 10px; |
||||||
|
background: rgba(145, 204, 255, 0.2); |
||||||
|
border: 1px solid rgba(145, 204, 255, 0.2); |
||||||
|
|
||||||
|
span { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
div { |
||||||
|
flex: 1; |
||||||
|
width: 100px; |
||||||
|
margin-left: 55px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nodebox { |
||||||
|
display: flex; |
||||||
|
width: 100%; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,128 @@ |
|||||||
|
import { |
||||||
|
Component, |
||||||
|
Input, |
||||||
|
OnInit, |
||||||
|
TemplateRef, |
||||||
|
ViewChild, |
||||||
|
ViewContainerRef, |
||||||
|
} from "@angular/core"; |
||||||
|
import { FormBuilder, FormGroup, Validators } from "@angular/forms"; |
||||||
|
import { |
||||||
|
NzFormatEmitEvent, |
||||||
|
NzTreeComponent, |
||||||
|
NzTreeNodeOptions, |
||||||
|
} from "ng-zorro-antd/tree"; |
||||||
|
import { NzModalService } from "ng-zorro-antd/modal"; |
||||||
|
import { NzMessageService } from "ng-zorro-antd/message"; |
||||||
|
import { HttpClient } from "@angular/common/http"; |
||||||
|
import { TreeService } from "src/app/service/tree.service"; |
||||||
|
import { NzNotificationService } from "ng-zorro-antd/notification"; |
||||||
|
@Component({ |
||||||
|
selector: "app-or-binding-model", |
||||||
|
templateUrl: "./or-binding-model.component.html", |
||||||
|
styleUrls: ["./or-binding-model.component.scss"], |
||||||
|
}) |
||||||
|
export class OrBindingModelComponent implements OnInit { |
||||||
|
@Input() data?: any; |
||||||
|
constructor( |
||||||
|
private fb: FormBuilder, |
||||||
|
private modal: NzModalService, |
||||||
|
private viewContainerRef: ViewContainerRef, |
||||||
|
private message: NzMessageService, |
||||||
|
private http: HttpClient, |
||||||
|
private toTree: TreeService, |
||||||
|
private notification: NzNotificationService, |
||||||
|
private notificationService: NzNotificationService |
||||||
|
) {} |
||||||
|
|
||||||
|
level; |
||||||
|
getAllUrl; |
||||||
|
addUrl; |
||||||
|
editUrl; |
||||||
|
deleteUrl; |
||||||
|
isAdmin: boolean; |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.level = JSON.parse( |
||||||
|
sessionStorage.getItem("userdata") |
||||||
|
).organization.level; |
||||||
|
this.getAllUrl = "/api/services/app/User/GetAll"; |
||||||
|
this.getAllOrganization(); |
||||||
|
} |
||||||
|
nzSelectedKeys: any[] = []; |
||||||
|
defaultExpandedKeys = []; |
||||||
|
IsContainsChildren = true; |
||||||
|
searchValue = ""; |
||||||
|
totalCount: string; |
||||||
|
//获取所有用户
|
||||||
|
|
||||||
|
//获取所有组织机构
|
||||||
|
nodes: any = []; |
||||||
|
organization; |
||||||
|
async getAllOrganization() { |
||||||
|
let userData = null; |
||||||
|
if (sessionStorage.getItem("isGasStation") == "true") { |
||||||
|
userData = JSON.parse(sessionStorage.getItem("userdataOfgasstation")); |
||||||
|
} else { |
||||||
|
userData = JSON.parse(sessionStorage.getItem("userdata")); |
||||||
|
} |
||||||
|
let OrganizationUnitId = userData.organization.id; |
||||||
|
let OrganizationUnitIds = userData.organizations?.map((v) => v.id); |
||||||
|
let params = { |
||||||
|
IsContainsChildren: "true", |
||||||
|
}; |
||||||
|
await new Promise<void>((resolve, reject) => { |
||||||
|
this.http |
||||||
|
.get("/api/services/app/Organization/GetAll", { |
||||||
|
params: params, |
||||||
|
}) |
||||||
|
.subscribe(async (data: any) => { |
||||||
|
this.organization = data.result.items; |
||||||
|
for (let index = 0; index < data.result.items.length; index++) { |
||||||
|
// if (data.result.items[index].id == OrganizationUnitId) {
|
||||||
|
// data.result.items[index].parentId = null;
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (OrganizationUnitIds && OrganizationUnitIds.length !== 0) { |
||||||
|
if (OrganizationUnitIds.includes(data.result.items[index].id)) { |
||||||
|
data.result.items[index].parentId = null; |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (data.result.items[index].id == OrganizationUnitId) { |
||||||
|
data.result.items[index].parentId = null; |
||||||
|
} |
||||||
|
} |
||||||
|
data.result.items[index].title = |
||||||
|
data.result.items[index].displayName; |
||||||
|
data.result.items[index].key = data.result.items[index].id; |
||||||
|
} |
||||||
|
this.nodes = [...this.toTree.toTree(data.result.items)]; |
||||||
|
this.defaultExpandedKeys = [this.nodes[0].id]; |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
okbinding(item) { |
||||||
|
console.log(this.data); |
||||||
|
console.log(item); |
||||||
|
this.modal.confirm({ |
||||||
|
nzTitle: "确定要绑定到此机构吗?", |
||||||
|
nzOkText: "确定", |
||||||
|
nzOkType: "primary", |
||||||
|
nzOnOk: () => { |
||||||
|
this.http |
||||||
|
.post("/api/services/app/Organization/SetSinoOrgLocal", null, { |
||||||
|
params: { |
||||||
|
sinoOrgId: this.data.organId, |
||||||
|
localOrgId: item.key, |
||||||
|
}, |
||||||
|
}) |
||||||
|
.subscribe(() => { |
||||||
|
this.message.create("success", "绑定成功"); |
||||||
|
}); |
||||||
|
}, |
||||||
|
nzCancelText: "取消", |
||||||
|
nzOnCancel: () => console.log("Cancel"), |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,56 @@ |
|||||||
|
<div class="userBox" id="userBox"> |
||||||
|
<div class="box"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="lefttop"> |
||||||
|
<span>中台组织机构列表</span> |
||||||
|
<span><i nz-icon nzType="search"></i> {{listConfig.totalCount}}个组织</span> |
||||||
|
</div> |
||||||
|
<div class="righttop"> |
||||||
|
<button nz-button nzType="primary" style="margin-right: 12px;" (click)="syncOr()">全量同步机构</button> |
||||||
|
<button nz-button nzType="primary" style="margin-right: 12px;" (click)="syncUser()">全量同步用户</button> |
||||||
|
<!-- <button nz-button nzType="primary" style="margin-right: 12px;" (click)="sync()">同步数据</button> --> |
||||||
|
<label class="isBinding" nz-checkbox [(ngModel)]="listConfig.IsBindingLocal" |
||||||
|
(ngModelChange)="submitForm()">是否绑定本地机构</label> |
||||||
|
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" nz-input placeholder="请输入站名" formControlName="search" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
<button style="display: none;" type="submit"></button> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="tablebox" #tablebox> |
||||||
|
<nz-table #basicTable [nzLoading]="listConfig.loading" [nzData]="listConfig.usersLIst" [nzShowPagination]='false' |
||||||
|
[nzPageSize]='16'> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th>机构名称</th> |
||||||
|
<th>机构类型</th> |
||||||
|
<th>已绑机构</th> |
||||||
|
<th [width]="'10%'">操作</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr *ngFor="let data of basicTable.data"> |
||||||
|
<td>{{ data.organName }}</td> |
||||||
|
<td>{{ getOrganType(data.detail.organType) }}</td> |
||||||
|
<td>{{ data.organization?.displayName || '' }}</td> |
||||||
|
<td class="operation"> |
||||||
|
<span class="blueColor" (click)="binding(data)">绑定机构</span> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</nz-table> |
||||||
|
</div> |
||||||
|
<div class="pagination"> |
||||||
|
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="listConfig.totalCount" [nzPageSize]="16" |
||||||
|
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)"> |
||||||
|
</nz-pagination> |
||||||
|
<ng-template #totalTemplate let-total> 16条/页,共{{listConfig.totalCount}}条 </ng-template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,168 @@ |
|||||||
|
.userBox { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #ffffff; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.treebox { |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
overflow: auto; |
||||||
|
flex-direction: column; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 10px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.check { |
||||||
|
width: 100%; |
||||||
|
float: right; |
||||||
|
} |
||||||
|
|
||||||
|
.topbox2 { |
||||||
|
width: 100%; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-top: 20px; |
||||||
|
|
||||||
|
.lefttop { |
||||||
|
height: 36px; |
||||||
|
line-height: 36px; |
||||||
|
color: #000; |
||||||
|
margin-right: 10px; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.righttop { |
||||||
|
flex: 1; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
nz-input-group { |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.orbox { |
||||||
|
width: 260px; |
||||||
|
min-width: 250px; |
||||||
|
overflow-y: auto; |
||||||
|
margin-right: 10px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.treeTitle { |
||||||
|
width: 100%; |
||||||
|
height: 55px; |
||||||
|
line-height: 55px; |
||||||
|
margin-top: 12px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
color: #000d21; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 10px; |
||||||
|
background: rgba(145, 204, 255, 0.2); |
||||||
|
border: 1px solid rgba(145, 204, 255, 0.2); |
||||||
|
|
||||||
|
span { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
div { |
||||||
|
flex: 1; |
||||||
|
width: 100px; |
||||||
|
margin-left: 55px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nodebox { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
tbody { |
||||||
|
|
||||||
|
.operation { |
||||||
|
i { |
||||||
|
cursor: pointer; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.box { |
||||||
|
flex: 1; |
||||||
|
// overflow: auto; |
||||||
|
padding-top: 20px; |
||||||
|
overflow-y: auto; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.topbox { |
||||||
|
width: 100%; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 12px; |
||||||
|
|
||||||
|
.lefttop { |
||||||
|
span:nth-child(1) { |
||||||
|
color: #000d21; |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
span:nth-child(2) { |
||||||
|
color: rgba(36, 36, 36, 0.24); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.righttop { |
||||||
|
display: flex; |
||||||
|
// align-items: center; |
||||||
|
.isBinding { |
||||||
|
margin-top: 6px; |
||||||
|
} |
||||||
|
button { |
||||||
|
margin-left: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
nz-input-group { |
||||||
|
height: 32px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tablebox { |
||||||
|
flex: 1; |
||||||
|
overflow-y: auto; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin: 15px 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.ortype { |
||||||
|
width: 36px; |
||||||
|
height: 20px; |
||||||
|
background: #2399ff; |
||||||
|
opacity: 1; |
||||||
|
border-radius: 2px; |
||||||
|
font-size: 12px; |
||||||
|
margin-right: 8px; |
||||||
|
color: #fff; |
||||||
|
text-align: center; |
||||||
|
} |
@ -0,0 +1,156 @@ |
|||||||
|
import { |
||||||
|
Component, |
||||||
|
OnInit, |
||||||
|
TemplateRef, |
||||||
|
ViewChild, |
||||||
|
ViewContainerRef, |
||||||
|
} from "@angular/core"; |
||||||
|
import { FormBuilder, FormGroup } from "@angular/forms"; |
||||||
|
import { NzFormatEmitEvent } from "ng-zorro-antd/tree"; |
||||||
|
import { NzModalService } from "ng-zorro-antd/modal"; |
||||||
|
import { NzMessageService } from "ng-zorro-antd/message"; |
||||||
|
import { HttpClient } from "@angular/common/http"; |
||||||
|
import { TreeService } from "src/app/service/tree.service"; |
||||||
|
import { NzNotificationService } from "ng-zorro-antd/notification"; |
||||||
|
import { OrBindingModelComponent } from "./or-binding-model/or-binding-model.component"; |
||||||
|
// import { BindingComponent } from "./binding/binding.component";
|
||||||
|
@Component({ |
||||||
|
selector: "app-or-binding", |
||||||
|
templateUrl: "./or-binding.component.html", |
||||||
|
styleUrls: ["./or-binding.component.scss"], |
||||||
|
}) |
||||||
|
export class OrBindingComponent implements OnInit { |
||||||
|
validateForm!: FormGroup; |
||||||
|
constructor( |
||||||
|
private fb: FormBuilder, |
||||||
|
private http: HttpClient, |
||||||
|
private toTree: TreeService, |
||||||
|
private modal: NzModalService, |
||||||
|
private message: NzMessageService, |
||||||
|
private viewContainerRef: ViewContainerRef |
||||||
|
) {} |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.validateForm = this.fb.group({ |
||||||
|
search: [null], |
||||||
|
}); |
||||||
|
|
||||||
|
this.getAllOr(); |
||||||
|
// this.getAllOrganization();
|
||||||
|
} |
||||||
|
|
||||||
|
listConfig = { |
||||||
|
loading: false, |
||||||
|
usersLIst: [], |
||||||
|
totalCount: 0, |
||||||
|
IsContainsChildren: true, |
||||||
|
searchValue: "", |
||||||
|
OrganizationUnitId: "", |
||||||
|
IsBindingLocal: true, |
||||||
|
}; |
||||||
|
getAllOr() { |
||||||
|
this.listConfig.loading = true; |
||||||
|
let params = { |
||||||
|
Keyword: this.validateForm.value.search |
||||||
|
? this.validateForm.value.search |
||||||
|
: "", |
||||||
|
SkipCount: String(this.SkipCount), |
||||||
|
MaxResultCount: String(this.MaxResultCount), |
||||||
|
// OrganizationUnitId: this.OrganizationUnitId,
|
||||||
|
IsBindingLocal: this.listConfig.IsBindingLocal, |
||||||
|
// IsActive:true,
|
||||||
|
// IsContainsChildren: String(this.listConfig.IsContainsChildren),
|
||||||
|
}; |
||||||
|
this.http |
||||||
|
.get(this.getAllUrl, { |
||||||
|
params: params, |
||||||
|
}) |
||||||
|
.subscribe((data: any) => { |
||||||
|
console.log("中台组织机构列表", data); |
||||||
|
data.result.items.forEach((element) => { |
||||||
|
element.detail = JSON.parse(element.detail); |
||||||
|
}); |
||||||
|
this.listConfig.usersLIst = data.result.items; |
||||||
|
this.listConfig.totalCount = data.result.totalCount; |
||||||
|
this.listConfig.loading = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
SkipCount: number = 0; //0 16 32 48
|
||||||
|
MaxResultCount: number = 16; |
||||||
|
pageChange($event) { |
||||||
|
this.SkipCount = ($event - 1) * this.MaxResultCount; |
||||||
|
this.getAllOr(); |
||||||
|
} |
||||||
|
getAllUrl = "/api/services/app/Organization/GetSinochemOrgs"; |
||||||
|
|
||||||
|
//搜索框提交
|
||||||
|
submitForm(): void { |
||||||
|
for (const i in this.validateForm.controls) { |
||||||
|
this.validateForm.controls[i].markAsDirty(); |
||||||
|
this.validateForm.controls[i].updateValueAndValidity(); |
||||||
|
} |
||||||
|
this.getAllOr(); |
||||||
|
} |
||||||
|
|
||||||
|
getOrganType(type) { |
||||||
|
let obj = { |
||||||
|
"00": "总公司", |
||||||
|
"01": "省公司", |
||||||
|
"05": "管理部门", |
||||||
|
"06": "大区公司", |
||||||
|
"07": "模块", |
||||||
|
"08": "管理区域", |
||||||
|
"09": "省子公司", |
||||||
|
"10": "油站网点/线上商城", |
||||||
|
"11": "油库", |
||||||
|
}; |
||||||
|
return obj[type]; |
||||||
|
} |
||||||
|
binding(data) { |
||||||
|
const modal = this.modal.create({ |
||||||
|
nzTitle: "绑定本地机构", |
||||||
|
nzContent: OrBindingModelComponent, |
||||||
|
nzViewContainerRef: this.viewContainerRef, |
||||||
|
nzWidth: 1500, |
||||||
|
nzFooter: null, |
||||||
|
nzMaskClosable: false, |
||||||
|
nzComponentParams: { |
||||||
|
data: JSON.parse(JSON.stringify(data)), |
||||||
|
}, |
||||||
|
}); |
||||||
|
const instance = modal.getContentComponent(); |
||||||
|
modal.afterClose.subscribe((result) => this.getAllOr()); |
||||||
|
} |
||||||
|
|
||||||
|
// sync() {
|
||||||
|
// this.http
|
||||||
|
// .post("/api/services/app/OrganizationSync/AutoSinochemOrgRelate", null)
|
||||||
|
// .subscribe((data: any) => {
|
||||||
|
// this.message.create("success", "同步成功");
|
||||||
|
// });
|
||||||
|
// }
|
||||||
|
|
||||||
|
syncOr() { |
||||||
|
this.http |
||||||
|
.post("/api/services/app/OrganizationSync/SyncOrgFromSinochem", null) |
||||||
|
.subscribe(() => { |
||||||
|
this.http |
||||||
|
.post( |
||||||
|
"/api/services/app/OrganizationSync/AutoSinochemOrgRelate", |
||||||
|
null |
||||||
|
) |
||||||
|
.subscribe(() => { |
||||||
|
this.message.create("success", "同步成功"); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
syncUser() { |
||||||
|
this.http |
||||||
|
.post("/api/services/app/OrganizationSync/SyncUserFromSinochem", null) |
||||||
|
.subscribe(() => { |
||||||
|
this.message.create("success", "同步成功"); |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,4 @@ |
|||||||
|
<div class="box"> |
||||||
|
<nz-tree #nzTreeComponent [nzSelectedKeys]="defaultSelectedKeys" [nzData]="nodes" |
||||||
|
[nzExpandedKeys]="defaultExpandedKeys"></nz-tree> |
||||||
|
</div> |
@ -0,0 +1,5 @@ |
|||||||
|
.box { |
||||||
|
max-height: 500px; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
|
@ -0,0 +1,55 @@ |
|||||||
|
import { Component, Input, OnInit, ViewChild } from "@angular/core"; |
||||||
|
import { NzModalRef } from "ng-zorro-antd/modal"; |
||||||
|
import { FormBuilder, FormGroup, Validators } from "@angular/forms"; |
||||||
|
import { HttpClient } from "@angular/common/http"; |
||||||
|
import { TreeService } from "src/app/service/tree.service"; |
||||||
|
import { NzTreeComponent } from "ng-zorro-antd/tree"; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: "app-change-or", |
||||||
|
templateUrl: "./change-or.component.html", |
||||||
|
styleUrls: ["./change-or.component.scss"], |
||||||
|
}) |
||||||
|
export class ChangeOrComponent implements OnInit { |
||||||
|
@Input() data?: any; |
||||||
|
@ViewChild("nzTreeComponent", { static: false }) |
||||||
|
nzTreeComponent!: NzTreeComponent; |
||||||
|
constructor( |
||||||
|
private modal: NzModalRef, |
||||||
|
private fb: FormBuilder, |
||||||
|
private http: HttpClient, |
||||||
|
private toTree: TreeService |
||||||
|
) {} |
||||||
|
|
||||||
|
defaultExpandedKeys = []; |
||||||
|
defaultSelectedKeys = []; |
||||||
|
ngOnInit(): void { |
||||||
|
this.getAllOrganization(); |
||||||
|
// this.nzTreeComponent.getCheckedNodeList()
|
||||||
|
} |
||||||
|
|
||||||
|
allOrList: any; |
||||||
|
nodes: any; |
||||||
|
getAllOrganization() { |
||||||
|
let params = { |
||||||
|
IsContainsChildren: "true", |
||||||
|
}; |
||||||
|
this.http |
||||||
|
.get("/api/services/app/Organization/GetAll", { |
||||||
|
params: params, |
||||||
|
}) |
||||||
|
.subscribe((data: any) => { |
||||||
|
console.log(data); |
||||||
|
data.result.items.forEach((element) => { |
||||||
|
element.key = element.id; |
||||||
|
element.title = element.displayName; |
||||||
|
}); |
||||||
|
this.allOrList = data.result.items.filter((v) => !v.isGasStation); |
||||||
|
this.nodes = [...this.toTree.toTree(this.allOrList)]; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
destroyModal(): void { |
||||||
|
this.modal.destroy({ data: "this the result data" }); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,113 @@ |
|||||||
|
<div class="userBox" id="userBox"> |
||||||
|
|
||||||
|
<div class="orbox"> |
||||||
|
<div class="topbox2"> |
||||||
|
<div class="lefttop"> |
||||||
|
组织机构 |
||||||
|
</div> |
||||||
|
<div class="righttop"> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" /> |
||||||
|
</nz-input-group> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="treeTitle"> |
||||||
|
<span>组织机构</span> |
||||||
|
<label nz-checkbox [(ngModel)]="IsContainsChildren" (ngModelChange)="getAllOrganization()">包含子节点</label> |
||||||
|
</div> |
||||||
|
<div class="treebox"> |
||||||
|
<nz-tree [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" |
||||||
|
[nzExpandedKeys]="defaultExpandedKeys" [nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)" |
||||||
|
[nzExpandedIcon]="multiExpandedIconTpl" [nzHideUnMatched]="true" [nzTreeTemplate]="nzTreeTemplate"> |
||||||
|
</nz-tree> |
||||||
|
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||||
|
<div class="nodebox"> |
||||||
|
<span class="name">{{ node.title }}</span> |
||||||
|
<span class="name">({{node.origin.products? node.origin.products.usersCount : 0}})</span> |
||||||
|
</div> |
||||||
|
</ng-template> |
||||||
|
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||||
|
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||||
|
|
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-template #elseTemplate> |
||||||
|
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" |
||||||
|
class="ant-tree-switcher-line-icon"></i> |
||||||
|
</ng-template> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="box"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="lefttop"> |
||||||
|
<span>用户列表</span> |
||||||
|
<span><i nz-icon nzType="search"></i> {{usersNum}}名用户</span> |
||||||
|
</div> |
||||||
|
<div class="righttop"> |
||||||
|
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" nz-input placeholder="请输入用户名" formControlName="search" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
<button style="display: none;" type="submit"></button> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="tablebox" #tablebox> |
||||||
|
<nz-table #basicTable [nzLoading]="loading" [nzData]="usersLIst" [nzShowPagination]='false' |
||||||
|
[nzPageSize]='16'> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th></th> |
||||||
|
<th>账号</th> |
||||||
|
<th>姓名</th> |
||||||
|
<!-- <th>角色/预警接收级别</th> --> |
||||||
|
<th [width]="'13%'">所属机构</th> |
||||||
|
<th [width]="'8%'">用户状态</th> |
||||||
|
<th [width]="'8%'">备注</th> |
||||||
|
<th [width]="'10%'">操作</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr *ngFor="let data of basicTable.data"> |
||||||
|
<td><img src="../../../assets/images/user.png" alt=""></td> |
||||||
|
<td>{{ data.userName }}</td> |
||||||
|
<td>{{ data.name }}</td> |
||||||
|
<!-- <td nzBreakWord> |
||||||
|
<span style="margin-right: 8px;" *ngFor="let item of data.roleDisplayNames">{{item}}</span> |
||||||
|
</td> --> |
||||||
|
<td> |
||||||
|
{{data.organizationName}} |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
<ng-container *ngIf="data.isActive; else elseTemplate"> |
||||||
|
<span class="greenColor2">已启用</span> |
||||||
|
</ng-container> |
||||||
|
<ng-template #elseTemplate> |
||||||
|
<span class="redColor">已停用</span> |
||||||
|
</ng-template> |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
{{data.note}} |
||||||
|
</td> |
||||||
|
<td class="operation"> |
||||||
|
<span class="blueColor" (click)="okbinding(data)">确认绑定</span> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</nz-table> |
||||||
|
</div> |
||||||
|
<div class="pagination"> |
||||||
|
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="usersNum" [nzPageSize]="16" |
||||||
|
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)"> |
||||||
|
</nz-pagination> |
||||||
|
<ng-template #totalTemplate let-total> 16条/页,共{{usersNum}}条 </ng-template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,223 @@ |
|||||||
|
.userBox { |
||||||
|
width: 100%; |
||||||
|
max-height: 680px; |
||||||
|
background: #FFFFFF; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.treebox { |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
overflow: auto; |
||||||
|
flex-direction: column; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 10px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.topbox2 { |
||||||
|
width: 100%; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-top: 20px; |
||||||
|
|
||||||
|
.lefttop { |
||||||
|
height: 36px; |
||||||
|
line-height: 36px; |
||||||
|
color: #000; |
||||||
|
margin-right: 10px; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.righttop { |
||||||
|
flex: 1; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
nz-input-group { |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.orbox { |
||||||
|
width: 260px; |
||||||
|
min-width: 250px; |
||||||
|
overflow-y: auto; |
||||||
|
margin-right: 10px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.treeTitle { |
||||||
|
width: 100%; |
||||||
|
height: 55px; |
||||||
|
line-height: 55px; |
||||||
|
margin-top: 12px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
color: #000D21; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 10px; |
||||||
|
background: rgba(145, 204, 255, 0.2); |
||||||
|
border: 1px solid rgba(145, 204, 255, 0.2); |
||||||
|
|
||||||
|
span { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
div { |
||||||
|
flex: 1; |
||||||
|
width: 100px; |
||||||
|
margin-left: 55px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nodebox { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
tbody { |
||||||
|
tr { |
||||||
|
td:nth-child(1) { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.operation { |
||||||
|
i { |
||||||
|
cursor: pointer; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.box { |
||||||
|
flex: 1; |
||||||
|
padding-top: 20px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
overflow: hidden; |
||||||
|
} |
||||||
|
|
||||||
|
.topbox { |
||||||
|
width: 100%; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 12px; |
||||||
|
|
||||||
|
.lefttop { |
||||||
|
span:nth-child(1) { |
||||||
|
color: #000D21; |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
span:nth-child(2) { |
||||||
|
color: rgba(36, 36, 36, 0.24); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.righttop { |
||||||
|
display: flex; |
||||||
|
|
||||||
|
button { |
||||||
|
margin-left: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
nz-input-group { |
||||||
|
height: 32px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tablebox { |
||||||
|
flex: 1; |
||||||
|
overflow-y: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin: 15px 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.ortype { |
||||||
|
width: 36px; |
||||||
|
height: 20px; |
||||||
|
background: #2399FF; |
||||||
|
opacity: 1; |
||||||
|
border-radius: 2px; |
||||||
|
font-size: 12px; |
||||||
|
margin-right: 8px; |
||||||
|
color: #fff; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.resetPasswordContent { |
||||||
|
z-index: 999; |
||||||
|
width: 380px; |
||||||
|
height: 138px; |
||||||
|
position: absolute; |
||||||
|
left: 30%; |
||||||
|
top: 30%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
box-sizing: border-box; |
||||||
|
padding-left: 40px; |
||||||
|
color: #000; |
||||||
|
border-radius: 5px; |
||||||
|
border-radius: 2px; |
||||||
|
box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%); |
||||||
|
background: #fff; |
||||||
|
|
||||||
|
.titlebox { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
span { |
||||||
|
font-size: 18px; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
i { |
||||||
|
font-size: 26px; |
||||||
|
margin-right: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
.close { |
||||||
|
position: absolute; |
||||||
|
right: 2px; |
||||||
|
top: -22px; |
||||||
|
font-size: 16px; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
.move { |
||||||
|
position: absolute; |
||||||
|
left: -32px; |
||||||
|
top: -22px; |
||||||
|
cursor: move; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.message { |
||||||
|
margin-top: 20px; |
||||||
|
|
||||||
|
i { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
|
||||||
|
i:hover { |
||||||
|
color: #18bb18; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
@ -0,0 +1,208 @@ |
|||||||
|
import { |
||||||
|
Component, |
||||||
|
Input, |
||||||
|
OnInit, |
||||||
|
TemplateRef, |
||||||
|
ViewChild, |
||||||
|
ViewContainerRef, |
||||||
|
} from "@angular/core"; |
||||||
|
import { FormBuilder, FormGroup, Validators } from "@angular/forms"; |
||||||
|
import { |
||||||
|
NzFormatEmitEvent, |
||||||
|
NzTreeComponent, |
||||||
|
NzTreeNodeOptions, |
||||||
|
} from "ng-zorro-antd/tree"; |
||||||
|
import { NzModalService } from "ng-zorro-antd/modal"; |
||||||
|
import { NzMessageService } from "ng-zorro-antd/message"; |
||||||
|
import { HttpClient } from "@angular/common/http"; |
||||||
|
import { TreeService } from "src/app/service/tree.service"; |
||||||
|
import { NzNotificationService } from "ng-zorro-antd/notification"; |
||||||
|
@Component({ |
||||||
|
selector: "app-binding", |
||||||
|
templateUrl: "./binding.component.html", |
||||||
|
styleUrls: ["./binding.component.scss"], |
||||||
|
}) |
||||||
|
export class BindingComponent implements OnInit { |
||||||
|
@Input() data?: any; |
||||||
|
validateForm!: FormGroup; |
||||||
|
constructor( |
||||||
|
private fb: FormBuilder, |
||||||
|
private modal: NzModalService, |
||||||
|
private viewContainerRef: ViewContainerRef, |
||||||
|
private message: NzMessageService, |
||||||
|
private http: HttpClient, |
||||||
|
private toTree: TreeService, |
||||||
|
private notification: NzNotificationService, |
||||||
|
private notificationService: NzNotificationService |
||||||
|
) {} |
||||||
|
|
||||||
|
level; |
||||||
|
getAllUrl; |
||||||
|
addUrl; |
||||||
|
editUrl; |
||||||
|
deleteUrl; |
||||||
|
CountsByOrganizations; |
||||||
|
isAdmin: boolean; |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.validateForm = this.fb.group({ |
||||||
|
search: [null], |
||||||
|
}); |
||||||
|
this.level = JSON.parse( |
||||||
|
sessionStorage.getItem("userdata") |
||||||
|
).organization.level; |
||||||
|
this.getAllUrl = "/api/services/app/User/GetAll"; |
||||||
|
this.CountsByOrganizations = |
||||||
|
"/api/services/app/User/GetCountsByOrganizations"; |
||||||
|
this.getAllOrganization(); |
||||||
|
} |
||||||
|
nzSelectedKeys: any[] = []; |
||||||
|
defaultExpandedKeys = []; |
||||||
|
IsContainsChildren = true; |
||||||
|
searchValue = ""; |
||||||
|
totalCount: string; |
||||||
|
//获取所有用户
|
||||||
|
usersLIst: any = []; |
||||||
|
usersNum: string; |
||||||
|
OrganizationUnitId; |
||||||
|
loading: boolean; |
||||||
|
organizationsList = []; |
||||||
|
getAllUsers() { |
||||||
|
this.loading = true; |
||||||
|
let params = { |
||||||
|
Keyword: this.validateForm.value.search |
||||||
|
? this.validateForm.value.search |
||||||
|
: "", |
||||||
|
SkipCount: String(this.SkipCount), |
||||||
|
MaxResultCount: String(this.MaxResultCount), |
||||||
|
OrganizationUnitId: this.OrganizationUnitId, |
||||||
|
IsContainsChildren: String(this.IsContainsChildren), |
||||||
|
// Sorting: 'BuildingBasicInfo.Id asc'
|
||||||
|
}; |
||||||
|
this.http |
||||||
|
.get(this.getAllUrl, { |
||||||
|
params: params, |
||||||
|
}) |
||||||
|
.subscribe((data: any) => { |
||||||
|
this.usersLIst = data.result.items; |
||||||
|
this.usersNum = data.result.totalCount; |
||||||
|
this.loading = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
SkipCount: number = 0; //0 16 32 48
|
||||||
|
MaxResultCount: number = 16; |
||||||
|
pageChange($event) { |
||||||
|
this.SkipCount = ($event - 1) * this.MaxResultCount; |
||||||
|
this.getAllUsers(); |
||||||
|
} |
||||||
|
|
||||||
|
//获取所有组织机构
|
||||||
|
nodes: any = []; |
||||||
|
organization; |
||||||
|
async getAllOrganization() { |
||||||
|
let params = { |
||||||
|
IsContainsChildren: "true", |
||||||
|
}; |
||||||
|
await new Promise<void>((resolve, reject) => { |
||||||
|
this.http |
||||||
|
.get("/api/services/app/Organization/GetAll", { |
||||||
|
params: params, |
||||||
|
}) |
||||||
|
.subscribe(async (data: any) => { |
||||||
|
this.organization = data.result.items; |
||||||
|
await this.getuser(data.result.items); |
||||||
|
resolve(data); |
||||||
|
this.getAllUsers(); |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
async getuser(e) { |
||||||
|
let userData = null; |
||||||
|
if (sessionStorage.getItem("isGasStation") == "true") { |
||||||
|
userData = JSON.parse(sessionStorage.getItem("userdataOfgasstation")); |
||||||
|
} else { |
||||||
|
userData = JSON.parse(sessionStorage.getItem("userdata")); |
||||||
|
} |
||||||
|
let OrganizationUnitId = userData.organization.id; |
||||||
|
let OrganizationUnitIds = userData.organizations?.map((v) => v.id); |
||||||
|
let params = { |
||||||
|
OrganizationUnitId: OrganizationUnitId, |
||||||
|
IsContainsChildren: "true", |
||||||
|
IsUsersCountContainsChildren: String(this.IsContainsChildren), |
||||||
|
}; |
||||||
|
await new Promise<void>((resolve, reject) => { |
||||||
|
this.http |
||||||
|
.get(this.CountsByOrganizations, { |
||||||
|
params: params, |
||||||
|
}) |
||||||
|
.subscribe((data: any) => { |
||||||
|
resolve(data); |
||||||
|
this.organizationsList = data.result; |
||||||
|
const arrs = e.map((item) => { |
||||||
|
const data = this.organizationsList.find( |
||||||
|
(i) => item.id == i.organizationId |
||||||
|
); |
||||||
|
return { |
||||||
|
...item, |
||||||
|
products: data ? data : false, |
||||||
|
}; |
||||||
|
}); |
||||||
|
|
||||||
|
for (let index = 0; index < arrs.length; index++) { |
||||||
|
if (OrganizationUnitIds && OrganizationUnitIds.length !== 0) { |
||||||
|
if (OrganizationUnitIds.includes(arrs[index].id)) { |
||||||
|
arrs[index].parentId = null; |
||||||
|
} |
||||||
|
} else { |
||||||
|
if (arrs[index].id == OrganizationUnitId) { |
||||||
|
arrs[index].parentId = null; |
||||||
|
} |
||||||
|
} |
||||||
|
arrs[index].title = arrs[index].displayName; |
||||||
|
arrs[index].key = arrs[index].id; |
||||||
|
} |
||||||
|
|
||||||
|
this.nodes = [...this.toTree.toTree(arrs)]; |
||||||
|
this.defaultExpandedKeys = [this.nodes[0].id]; |
||||||
|
this.nzSelectedKeys = [this.nodes[0].id]; |
||||||
|
this.OrganizationUnitId = [this.nodes[0].id]; |
||||||
|
}); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
//搜索框提交
|
||||||
|
submitForm(): void { |
||||||
|
for (const i in this.validateForm.controls) { |
||||||
|
this.validateForm.controls[i].markAsDirty(); |
||||||
|
this.validateForm.controls[i].updateValueAndValidity(); |
||||||
|
} |
||||||
|
this.getAllUsers(); |
||||||
|
} |
||||||
|
nzClick(event: NzFormatEmitEvent) { |
||||||
|
this.nzSelectedKeys[0] = event.node.origin.id; |
||||||
|
this.nzSelectedKeys = [...this.nzSelectedKeys]; |
||||||
|
this.OrganizationUnitId = event.node.origin.id; |
||||||
|
this.getAllUsers(); |
||||||
|
} |
||||||
|
okbinding(item) { |
||||||
|
this.modal.confirm({ |
||||||
|
nzTitle: "确定要绑定到此本地用户吗?", |
||||||
|
nzOkText: "确定", |
||||||
|
nzOkType: "primary", |
||||||
|
nzOnOk: () => { |
||||||
|
this.http |
||||||
|
.post("/api/services/app/User/SetSinochemUserLocal", null, { |
||||||
|
params: { |
||||||
|
sinochemUserId: this.data.userId, |
||||||
|
localUserId: item.id, |
||||||
|
}, |
||||||
|
}) |
||||||
|
.subscribe(() => { |
||||||
|
this.message.create("success", "绑定成功"); |
||||||
|
}); |
||||||
|
}, |
||||||
|
nzCancelText: "取消", |
||||||
|
nzOnCancel: () => console.log("Cancel"), |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
@ -0,0 +1,101 @@ |
|||||||
|
<div class="userBox" id="userBox"> |
||||||
|
|
||||||
|
<!-- <div class="orbox"> |
||||||
|
<div class="topbox2"> |
||||||
|
<div class="lefttop"> |
||||||
|
组织机构 |
||||||
|
</div> |
||||||
|
<div class="righttop"> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" nz-input placeholder="请输入机构名称" [(ngModel)]="searchValue" /> |
||||||
|
</nz-input-group> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="treeTitle"> |
||||||
|
<span>组织机构</span> |
||||||
|
<label nz-checkbox [(ngModel)]="IsContainsChildren" (ngModelChange)="getAllOrganization()">包含子节点</label> |
||||||
|
</div> |
||||||
|
<div class="treebox"> |
||||||
|
<nz-tree [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandedKeys]="defaultExpandedKeys" |
||||||
|
[nzSelectedKeys]='nzSelectedKeys' (nzClick)="nzClick($event)" [nzExpandedIcon]="multiExpandedIconTpl" |
||||||
|
[nzHideUnMatched]="true" [nzTreeTemplate]="nzTreeTemplate"> |
||||||
|
</nz-tree> |
||||||
|
<ng-template #nzTreeTemplate let-node let-origin="origin"> |
||||||
|
<div class="nodebox"> |
||||||
|
<span class="name">{{ node.title }}</span> |
||||||
|
<span class="name">({{node.origin.products? node.origin.products.usersCount : 0}})</span> |
||||||
|
</div> |
||||||
|
</ng-template> |
||||||
|
<ng-template #multiExpandedIconTpl let-node let-origin="origin"> |
||||||
|
<ng-container *ngIf="node.children.length == 0; else elseTemplate"> |
||||||
|
|
||||||
|
</ng-container> |
||||||
|
|
||||||
|
<ng-template #elseTemplate> |
||||||
|
<i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'" class="ant-tree-switcher-line-icon"></i> |
||||||
|
</ng-template> |
||||||
|
</ng-template> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> --> |
||||||
|
<div class="box"> |
||||||
|
<div class="topbox"> |
||||||
|
<div class="lefttop"> |
||||||
|
<span>中台用户列表</span> |
||||||
|
<span><i nz-icon nzType="search"></i> {{listConfig.totalCount}}名用户</span> |
||||||
|
</div> |
||||||
|
<div class="righttop"> |
||||||
|
<label class="isBinding" nz-checkbox [(ngModel)]="listConfig.IsBindingLocal" (ngModelChange)="submitForm()">是否绑定本地用户</label> |
||||||
|
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"> |
||||||
|
|
||||||
|
<nz-form-item> |
||||||
|
<nz-form-control> |
||||||
|
<nz-input-group nzPrefixIcon="search"> |
||||||
|
<input type="text" nz-input placeholder="请输入用户名" formControlName="search" /> |
||||||
|
</nz-input-group> |
||||||
|
</nz-form-control> |
||||||
|
<button style="display: none;" type="submit"></button> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="tablebox" #tablebox> |
||||||
|
<nz-table #basicTable [nzLoading]="listConfig.loading" [nzData]="listConfig.usersLIst" [nzShowPagination]='false' |
||||||
|
[nzPageSize]='16'> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th [width]="'5%'"></th> |
||||||
|
<th>账号</th> |
||||||
|
<th>账号id</th> |
||||||
|
<th>绑定的本地用户id</th> |
||||||
|
<th [width]="'8%'">备注</th> |
||||||
|
<th [width]="'10%'">操作</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr *ngFor="let data of basicTable.data"> |
||||||
|
<td><img src="../../../assets/images/user.png" alt=""></td> |
||||||
|
<td>{{ data.loginName }}</td> |
||||||
|
<td>{{ data.userId }}</td> |
||||||
|
<td> |
||||||
|
{{data.localUserId}} |
||||||
|
</td> |
||||||
|
<td> |
||||||
|
{{data.detail}} |
||||||
|
</td> |
||||||
|
<td class="operation"> |
||||||
|
<span class="blueColor" (click)="binding(data)">绑定本地用户</span> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</nz-table> |
||||||
|
</div> |
||||||
|
<div class="pagination"> |
||||||
|
<nz-pagination [nzHideOnSinglePage]="false" [nzPageIndex]="1" [nzTotal]="listConfig.totalCount" [nzPageSize]="16" |
||||||
|
[nzShowTotal]="totalTemplate" nzShowQuickJumper (nzPageIndexChange)="pageChange($event)"> |
||||||
|
</nz-pagination> |
||||||
|
<ng-template #totalTemplate let-total> 16条/页,共{{listConfig.totalCount}}条 </ng-template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
@ -0,0 +1,173 @@ |
|||||||
|
.userBox { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #ffffff; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 20px; |
||||||
|
overflow: hidden; |
||||||
|
display: flex; |
||||||
|
position: relative; |
||||||
|
|
||||||
|
.treebox { |
||||||
|
display: flex; |
||||||
|
flex: 1; |
||||||
|
overflow: auto; |
||||||
|
flex-direction: column; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 10px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.check { |
||||||
|
width: 100%; |
||||||
|
float: right; |
||||||
|
} |
||||||
|
|
||||||
|
.topbox2 { |
||||||
|
width: 100%; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
margin-top: 20px; |
||||||
|
|
||||||
|
.lefttop { |
||||||
|
height: 36px; |
||||||
|
line-height: 36px; |
||||||
|
color: #000; |
||||||
|
margin-right: 10px; |
||||||
|
font-size: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.righttop { |
||||||
|
flex: 1; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
|
||||||
|
nz-input-group { |
||||||
|
height: 36px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.orbox { |
||||||
|
width: 260px; |
||||||
|
min-width: 250px; |
||||||
|
overflow-y: auto; |
||||||
|
margin-right: 10px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.treeTitle { |
||||||
|
width: 100%; |
||||||
|
height: 55px; |
||||||
|
line-height: 55px; |
||||||
|
margin-top: 12px; |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
color: #000d21; |
||||||
|
box-sizing: border-box; |
||||||
|
padding: 0 10px; |
||||||
|
background: rgba(145, 204, 255, 0.2); |
||||||
|
border: 1px solid rgba(145, 204, 255, 0.2); |
||||||
|
|
||||||
|
span { |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
|
||||||
|
div { |
||||||
|
flex: 1; |
||||||
|
width: 100px; |
||||||
|
margin-left: 55px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.nodebox { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
} |
||||||
|
|
||||||
|
tbody { |
||||||
|
tr { |
||||||
|
td:nth-child(1) { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.operation { |
||||||
|
i { |
||||||
|
cursor: pointer; |
||||||
|
margin-right: 8px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.box { |
||||||
|
flex: 1; |
||||||
|
// overflow: auto; |
||||||
|
padding-top: 20px; |
||||||
|
overflow-y: auto; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.topbox { |
||||||
|
width: 100%; |
||||||
|
height: 36px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 12px; |
||||||
|
|
||||||
|
.lefttop { |
||||||
|
span:nth-child(1) { |
||||||
|
color: #000d21; |
||||||
|
margin-right: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
span:nth-child(2) { |
||||||
|
color: rgba(36, 36, 36, 0.24); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.righttop { |
||||||
|
display: flex; |
||||||
|
// align-items: center; |
||||||
|
.isBinding { |
||||||
|
margin-top: 6px; |
||||||
|
} |
||||||
|
button { |
||||||
|
margin-left: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
nz-input-group { |
||||||
|
height: 32px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.tablebox { |
||||||
|
flex: 1; |
||||||
|
overflow-y: auto; |
||||||
|
overflow: auto; |
||||||
|
} |
||||||
|
|
||||||
|
.pagination { |
||||||
|
margin: 15px 0; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.ortype { |
||||||
|
width: 36px; |
||||||
|
height: 20px; |
||||||
|
background: #2399ff; |
||||||
|
opacity: 1; |
||||||
|
border-radius: 2px; |
||||||
|
font-size: 12px; |
||||||
|
margin-right: 8px; |
||||||
|
color: #fff; |
||||||
|
text-align: center; |
||||||
|
} |
@ -0,0 +1,106 @@ |
|||||||
|
import { |
||||||
|
Component, |
||||||
|
OnInit, |
||||||
|
TemplateRef, |
||||||
|
ViewChild, |
||||||
|
ViewContainerRef, |
||||||
|
} from "@angular/core"; |
||||||
|
import { FormBuilder, FormGroup } from "@angular/forms"; |
||||||
|
import { NzFormatEmitEvent } from "ng-zorro-antd/tree"; |
||||||
|
import { NzModalService } from "ng-zorro-antd/modal"; |
||||||
|
import { NzMessageService } from "ng-zorro-antd/message"; |
||||||
|
import { HttpClient } from "@angular/common/http"; |
||||||
|
import { TreeService } from "src/app/service/tree.service"; |
||||||
|
import { NzNotificationService } from "ng-zorro-antd/notification"; |
||||||
|
import { BindingComponent } from "./binding/binding.component"; |
||||||
|
@Component({ |
||||||
|
selector: "app-user-binding", |
||||||
|
templateUrl: "./user-binding.component.html", |
||||||
|
styleUrls: ["./user-binding.component.scss"], |
||||||
|
}) |
||||||
|
export class UserBindingComponent implements OnInit { |
||||||
|
validateForm!: FormGroup; |
||||||
|
constructor( |
||||||
|
private fb: FormBuilder, |
||||||
|
private http: HttpClient, |
||||||
|
private toTree: TreeService, |
||||||
|
private modal: NzModalService, |
||||||
|
private viewContainerRef: ViewContainerRef |
||||||
|
) {} |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.validateForm = this.fb.group({ |
||||||
|
search: [null], |
||||||
|
}); |
||||||
|
|
||||||
|
this.getAllUsers(); |
||||||
|
// this.getAllOrganization();
|
||||||
|
} |
||||||
|
|
||||||
|
listConfig = { |
||||||
|
loading: false, |
||||||
|
usersLIst: [], |
||||||
|
totalCount: 0, |
||||||
|
IsContainsChildren: true, |
||||||
|
searchValue: "", |
||||||
|
OrganizationUnitId: "", |
||||||
|
IsBindingLocal: true, |
||||||
|
}; |
||||||
|
getAllUsers() { |
||||||
|
this.listConfig.loading = true; |
||||||
|
let params = { |
||||||
|
Keyword: this.validateForm.value.search |
||||||
|
? this.validateForm.value.search |
||||||
|
: "", |
||||||
|
SkipCount: String(this.SkipCount), |
||||||
|
MaxResultCount: String(this.MaxResultCount), |
||||||
|
// OrganizationUnitId: this.OrganizationUnitId,
|
||||||
|
IsBindingLocal: this.listConfig.IsBindingLocal, |
||||||
|
// IsActive:true,
|
||||||
|
// IsContainsChildren: String(this.listConfig.IsContainsChildren),
|
||||||
|
}; |
||||||
|
this.http |
||||||
|
.get(this.getAllUrl, { |
||||||
|
params: params, |
||||||
|
}) |
||||||
|
.subscribe((data: any) => { |
||||||
|
console.log("中台用户列表", data); |
||||||
|
this.listConfig.usersLIst = data.result.items; |
||||||
|
this.listConfig.totalCount = data.result.totalCount; |
||||||
|
this.listConfig.loading = false; |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
SkipCount: number = 0; //0 16 32 48
|
||||||
|
MaxResultCount: number = 16; |
||||||
|
pageChange($event) { |
||||||
|
this.SkipCount = ($event - 1) * this.MaxResultCount; |
||||||
|
this.getAllUsers(); |
||||||
|
} |
||||||
|
getAllUrl = "/api/services/app/User/GetSinochemUsers"; |
||||||
|
|
||||||
|
//搜索框提交
|
||||||
|
submitForm(): void { |
||||||
|
for (const i in this.validateForm.controls) { |
||||||
|
this.validateForm.controls[i].markAsDirty(); |
||||||
|
this.validateForm.controls[i].updateValueAndValidity(); |
||||||
|
} |
||||||
|
this.getAllUsers(); |
||||||
|
} |
||||||
|
|
||||||
|
binding(data) { |
||||||
|
const modal = this.modal.create({ |
||||||
|
nzTitle: "绑定本地用户", |
||||||
|
nzContent: BindingComponent, |
||||||
|
nzViewContainerRef: this.viewContainerRef, |
||||||
|
nzWidth: 1500, |
||||||
|
nzFooter: null, |
||||||
|
nzMaskClosable: false, |
||||||
|
nzComponentParams: { |
||||||
|
data: JSON.parse(JSON.stringify(data)), |
||||||
|
}, |
||||||
|
}); |
||||||
|
const instance = modal.getContentComponent(); |
||||||
|
modal.afterClose.subscribe((result) => this.getAllUsers()); |
||||||
|
} |
||||||
|
} |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue