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 |
@ -1,13 +1,22 @@
|
||||
{ |
||||
"/api": { |
||||
"target": "http://121.36.37.70:8225/", |
||||
"target": "https://znaq.sinochemoilmarketing.com/", |
||||
"测试1": "http://121.36.37.70:8906/", |
||||
"测试2": "https://znaq.sinochemoilmarketing.com/", |
||||
"测试3": "https://gas.anxincloud.cn/", |
||||
"中台": "http://10.156.134.54:8906/", |
||||
"secure": false, |
||||
"changeOrigin": true |
||||
}, |
||||
"/signalr": { |
||||
"target": "http://121.36.37.70:8225/", |
||||
"target": "https://znaq.sinochemoilmarketing.com/", |
||||
"secure": false, |
||||
"ws": true, |
||||
"logLevel": "debug" |
||||
}, |
||||
"/sagframe-portal": { |
||||
"target": "https://uat-uomsp.sinochemoilmarketing.com/", |
||||
"secure": false, |
||||
"changeOrigin": true |
||||
} |
||||
} |
||||
|
@ -1,35 +1,100 @@
|
||||
import { Component, OnInit, Inject } from '@angular/core'; |
||||
import { Injectable } from '@angular/core'; |
||||
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; |
||||
import { HttpClient } from "@angular/common/http"; |
||||
import { Component, OnInit, Inject } from "@angular/core"; |
||||
import { Injectable } from "@angular/core"; |
||||
import { |
||||
CanActivate, |
||||
ActivatedRouteSnapshot, |
||||
RouterStateSnapshot, |
||||
Router, |
||||
} from "@angular/router"; |
||||
|
||||
@Injectable({ |
||||
providedIn: 'root' |
||||
providedIn: "root", |
||||
}) |
||||
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(); |
||||
} |
||||
return this.checkLogin(); |
||||
} |
||||
|
||||
// 路由守卫
|
||||
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { |
||||
// console.log('路由守卫',next.data)
|
||||
// if(next.data.permission == 'xxxx'){
|
||||
// return true;
|
||||
// }
|
||||
return this.checkLogin(); |
||||
checkLogin(): boolean { |
||||
// 判断本地有没有token
|
||||
const token = sessionStorage.getItem("token"); |
||||
|
||||
// 如果有token,允许访问
|
||||
if (token) { |
||||
return true; |
||||
} |
||||
|
||||
checkLogin(): boolean { |
||||
// 判断本地有没有token
|
||||
const token = sessionStorage.getItem('token'); |
||||
//如果没有token,跳转登录页
|
||||
// this.router.navigate(["/login"]);
|
||||
|
||||
// 如果有token,允许访问
|
||||
if (token) { return true; } |
||||
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(); |
||||
} |
||||
); |
||||
}); |
||||
} |
||||
|
||||
//如果没有token,跳转登录页
|
||||
this.router.navigate(['/login']); |
||||
|
||||
return false; |
||||
} |
||||
} |
||||
|
@ -1,15 +0,0 @@
|
||||
<div class="box" cdkDrag> |
||||
<div class="title" cdkDragHandle> |
||||
<span> |
||||
{{title}} |
||||
</span> |
||||
<span class="close" (click)="close()"> |
||||
<i nz-icon nzType="close" nzTheme="outline"></i> |
||||
</span> |
||||
</div> |
||||
<div class="content"> |
||||
<ul> |
||||
<li *ngFor="let item of data">{{item}}</li> |
||||
</ul> |
||||
</div> |
||||
</div> |
@ -1,54 +0,0 @@
|
||||
.box { |
||||
width: 280px; |
||||
font-size: 16px; |
||||
border: 1px solid #558DB1; |
||||
} |
||||
.title { |
||||
height: 32px; |
||||
line-height: 32px; |
||||
background-image: url(../../../../assets/gismap/listtitle.png); |
||||
background-size: 100% 100%; |
||||
background-repeat: no-repeat; |
||||
color: #fff; |
||||
box-sizing: border-box; |
||||
padding-left: 16px; |
||||
padding-right: 10px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
cursor: default; |
||||
.close{ |
||||
cursor: pointer; |
||||
} |
||||
} |
||||
.content { |
||||
max-height: 250px; |
||||
overflow-y: auto; |
||||
ul{ |
||||
margin-bottom: 0; |
||||
} |
||||
li { |
||||
height: 38px; |
||||
line-height: 38px; |
||||
padding-left: 16px; |
||||
padding-right: 10px; |
||||
color: #f7faff; |
||||
font-size: 15px; |
||||
cursor: pointer; |
||||
} |
||||
li:nth-child(odd) { |
||||
background: linear-gradient( |
||||
90deg, |
||||
RGBA(17, 50, 83, 1), |
||||
RGBA(17, 50, 83, 0.8) |
||||
); |
||||
} |
||||
li:nth-child(even) { |
||||
background: linear-gradient( |
||||
90deg, |
||||
RGBA(38, 56, 73, 1), |
||||
RGBA(38, 56, 73, 0.8) |
||||
); |
||||
border-top: 1px solid #3e4f60; |
||||
border-bottom: 1px solid #3e4f60; |
||||
} |
||||
} |
@ -1,20 +0,0 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; |
||||
|
||||
@Component({ |
||||
selector: "app-card-list", |
||||
templateUrl: "./card-list.component.html", |
||||
styleUrls: ["./card-list.component.scss"], |
||||
}) |
||||
export class CardListComponent implements OnInit { |
||||
@Input() title; |
||||
@Input() data; |
||||
|
||||
@Output() childEvent = new EventEmitter<any>(); |
||||
constructor() {} |
||||
|
||||
ngOnInit(): void {} |
||||
|
||||
close() { |
||||
this.childEvent.emit("closeCardList"); |
||||
} |
||||
} |
@ -1,4 +0,0 @@
|
||||
<div class="box"> |
||||
<span class="title">{{title}}</span> |
||||
<span class="subtitle">{{subtitle}}</span> |
||||
</div> |
@ -1,29 +0,0 @@
|
||||
.box { |
||||
width: 100%; |
||||
height: 52px; |
||||
background-image: url(../../../../assets/gismap/cardtitle.png); |
||||
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
||||
position: absolute; |
||||
top: -6px; |
||||
left: 0px; |
||||
display: flex; |
||||
align-items: center; |
||||
.title { |
||||
font-size: 20px; |
||||
margin-left: 60px; |
||||
margin-top: 10px; |
||||
color: #fff; |
||||
font-family: titlefont; |
||||
// background: linear-gradient(to bottom, #fff, #88c3ec); |
||||
// -webkit-background-clip: text; |
||||
// -webkit-text-fill-color: transparent; |
||||
} |
||||
.subtitle { |
||||
font-size: 12px; |
||||
color: rgba(185, 233, 255, 0.4); |
||||
font-family: titlefont; |
||||
margin-left: 6px; |
||||
margin-top: 16px; |
||||
} |
||||
} |
@ -1,14 +0,0 @@
|
||||
import { Component, Input, OnInit } from "@angular/core"; |
||||
|
||||
@Component({ |
||||
selector: "app-card-title", |
||||
templateUrl: "./card-title.component.html", |
||||
styleUrls: ["./card-title.component.scss"], |
||||
}) |
||||
export class CardTitleComponent implements OnInit { |
||||
@Input() title: string; |
||||
@Input() subtitle: string; |
||||
constructor() {} |
||||
|
||||
ngOnInit(): void {} |
||||
} |
@ -1,67 +0,0 @@
|
||||
<div class="box"> |
||||
<div id="mapDiv"></div> |
||||
<div class="mask" style="pointer-events: none;"></div> |
||||
<div class="leftBox"> |
||||
<div class="left1 cardItem" |
||||
(click)="urlTo('http://121.36.37.70:8201/planManagement/entryPlan?singleSignOn=true')"> |
||||
<app-card-title [title]="'预案统计'" [subtitle]="'Plan statistics'"></app-card-title> |
||||
<app-unit-title [num]="21250" (childEvent)="handleChildData($event)"></app-unit-title> |
||||
<div class="content"> |
||||
<div id="echartleft1"></div> |
||||
</div> |
||||
</div> |
||||
<div class="left2 cardItem" (click)="aHref($event,'ax://startup')"> |
||||
<app-card-title [title]="'演练统计'" [subtitle]="'Exercise statistics'"></app-card-title> |
||||
<app-unit-title [num]="126"></app-unit-title> |
||||
<div class="content"> |
||||
<div id="echartleft2"></div> |
||||
</div> |
||||
</div> |
||||
<div class="left3 cardItem" (click)="aHref($event,'ax2://startup')"> |
||||
<app-card-title [title]="'风险管控平台统计'" [subtitle]="'Risk management'"></app-card-title> |
||||
<app-unit-title [num]="33"></app-unit-title> |
||||
<div class="content"> |
||||
<div id="echartleft3"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="rightBox"> |
||||
<div class="right1 cardItem" (click)="urlTo('http://121.36.37.70:8906/homepage?singleSignOn=true')"> |
||||
<app-card-title [title]="'接入类型'" [subtitle]="'Intervention type'"></app-card-title> |
||||
<div class="content"> |
||||
<div class="accessList"> |
||||
<div class="accessitem" *ngFor="let item of accessList"> |
||||
<div class="img"> |
||||
<img [src]="item.img" alt=""> |
||||
</div> |
||||
<div class="namebox"> |
||||
<span class="name">{{item.name}}</span> |
||||
<span class="value" [ngStyle]="{'color': item.color}">{{item.value}}</span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="right2 cardItem" (click)="urlTo('http://121.36.37.70:8906/todaywarning?singleSignOn=true')"> |
||||
<app-card-title [title]="'预警统计'" [subtitle]="'Warning statistics'"></app-card-title> |
||||
<div class="content"> |
||||
<div id="echartright1"></div> |
||||
</div> |
||||
</div> |
||||
<div class="right3 cardItem" |
||||
(click)="urlTo('http://121.36.37.70:8906/records_nav/oliunloadinglist?singleSignOn=true')"> |
||||
<app-card-title [title]="'卸油事件'" [subtitle]="'Oil unloading event'"></app-card-title> |
||||
<div class="content"> |
||||
<div id="echartright2"></div> |
||||
<div id="echartright3"></div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="unitList" [hidden]="!isConnectedUnit"> |
||||
<app-card-list [title]="'已接入单位'" [data]="unitList1" (childEvent)="handleChildData($event)"></app-card-list> |
||||
</div> |
||||
|
||||
|
||||
<div class="secretkey" (dblclick)="secretkeyTo()"></div> |
||||
</div> |
@ -1,156 +0,0 @@
|
||||
.box { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: relative; |
||||
} |
||||
.mask { |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
left: 0; |
||||
top: 0; |
||||
z-index: 500; |
||||
// background: radial-gradient( |
||||
// rgba(255, 255, 255, 0) 0%, |
||||
// rgba(6, 24, 50, 0.6) 50%, |
||||
// rgb(5, 26, 56) 100% |
||||
// ); |
||||
background: radial-gradient( |
||||
rgba(255, 255, 255, 0), |
||||
rgba(255, 255, 255, 0), |
||||
rgba(6, 24, 50, 0.6), |
||||
rgba(6, 24, 50, 1) |
||||
); |
||||
} |
||||
#mapDiv { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
.leftBox, |
||||
.rightBox { |
||||
width: 430px; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
z-index: 500; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: space-between; |
||||
box-sizing: border-box; |
||||
padding-top: 20px; |
||||
padding-bottom: 10px; |
||||
} |
||||
.leftBox { |
||||
left: 20px; |
||||
.left1 { |
||||
height: 38%; |
||||
} |
||||
.left2 { |
||||
height: 29%; |
||||
} |
||||
.left3 { |
||||
height: 29%; |
||||
} |
||||
} |
||||
.rightBox { |
||||
right: 20px; |
||||
.right1 { |
||||
height: 25%; |
||||
} |
||||
.right2 { |
||||
height: 34%; |
||||
} |
||||
.right3 { |
||||
height: 38%; |
||||
} |
||||
} |
||||
|
||||
.cardItem { |
||||
background-image: url(../../../assets/gismap/cardbg.png); |
||||
background-repeat: no-repeat; |
||||
background-size: 100% 100%; |
||||
position: relative; |
||||
box-sizing: border-box; |
||||
padding-top: 50px; |
||||
display: flex; |
||||
flex-direction: column; |
||||
.content { |
||||
flex: 1; |
||||
position: relative; |
||||
} |
||||
} |
||||
|
||||
.accessList { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
align-items: center; |
||||
width: 100%; |
||||
height: 100%; |
||||
box-sizing: border-box; |
||||
padding: 12px 35px 12px 12px; |
||||
.accessitem { |
||||
width: 50%; |
||||
display: flex; |
||||
align-items: center; |
||||
.img { |
||||
margin-left: 20%; |
||||
margin-right: 12px; |
||||
} |
||||
.namebox { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
.name { |
||||
font-size: 16px; |
||||
// font-family: Alibaba PuHuiTi; |
||||
font-weight: 500; |
||||
color: #ffffff; |
||||
} |
||||
.value { |
||||
font-size: 20px; |
||||
font-family: DINPro; |
||||
font-weight: bold; |
||||
color: #479ffe; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
#echartleft1, |
||||
#echartleft2, |
||||
#echartleft3, |
||||
#echartright1 { |
||||
width: 100%; |
||||
height: 100%; |
||||
} |
||||
|
||||
#echartright2 { |
||||
width: 100%; |
||||
height: 60%; |
||||
} |
||||
|
||||
#echartright3 { |
||||
width: 100%; |
||||
height: 45%; |
||||
position: absolute; |
||||
left: 0; |
||||
bottom: 0; |
||||
} |
||||
|
||||
.unitList { |
||||
position: absolute; |
||||
left: 24%; |
||||
top: 2%; |
||||
z-index: 500; |
||||
} |
||||
|
||||
.secretkey { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
width: 5px; |
||||
height: 5px; |
||||
cursor: pointer; |
||||
z-index: 999; |
||||
} |
@ -1,6 +0,0 @@
|
||||
<div class="box"> |
||||
<div class="numbox"> |
||||
截至{{time}} , 已接入单位数 : <div class="num" *ngFor="let item of numArr">{{item}}</div> 家 |
||||
</div> |
||||
<!-- <button class="btn" (click)="select($event)">选择</button> --> |
||||
</div> |
@ -1,36 +0,0 @@
|
||||
.box { |
||||
color: #fff; |
||||
display: flex; |
||||
align-items: center; |
||||
font-size: 13px; |
||||
margin-top: 3px; |
||||
margin-left: 30px; |
||||
} |
||||
.numbox { |
||||
display: flex; |
||||
align-items: center; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
margin-right: 12px; |
||||
.num { |
||||
width: 22px; |
||||
height: 22px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
border: 1px solid rgba(129, 197, 200, 0.6); |
||||
font-family: DS-Digital; |
||||
font-weight: bold; |
||||
color: #ef9c00; |
||||
margin: 0 2px; |
||||
} |
||||
} |
||||
.btn { |
||||
width: 50px; |
||||
height: 24px; |
||||
border: 1px solid #46bbf1; |
||||
background: linear-gradient(0deg, #4ad0ff 0%, #2d3d5b 100%); |
||||
border-radius: 3px; |
||||
cursor: pointer; |
||||
} |
@ -1,48 +0,0 @@
|
||||
import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core"; |
||||
|
||||
@Component({ |
||||
selector: "app-unit-title", |
||||
templateUrl: "./unit-title.component.html", |
||||
styleUrls: ["./unit-title.component.scss"], |
||||
}) |
||||
export class UnitTitleComponent implements OnInit { |
||||
@Input() num: number; |
||||
|
||||
@Output() childEvent = new EventEmitter<any>(); |
||||
constructor() {} |
||||
|
||||
time: string; |
||||
ngOnInit(): void { |
||||
console.log(this.num); |
||||
this.getTime(); |
||||
this.transformationNum(this.num); |
||||
} |
||||
|
||||
getTime() { |
||||
let today = new Date(); |
||||
let year = today.getFullYear(); |
||||
let month = today.getMonth() + 1; // 月份是从0开始的,所以要加1
|
||||
let day = today.getDate(); |
||||
this.time = year + "/" + month + "/" + day; |
||||
} |
||||
|
||||
numArr = []; |
||||
transformationNum(num) { |
||||
let str = String(num); |
||||
switch (str.length) { |
||||
case 1: |
||||
this.numArr = ["0", "0", str]; |
||||
break; |
||||
case 2: |
||||
this.numArr = ["0", str[0], str[1]]; |
||||
break; |
||||
default: |
||||
this.numArr = str.split(""); |
||||
} |
||||
} |
||||
|
||||
select(event) { |
||||
event.stopPropagation(); |
||||
this.childEvent.emit("openCardList"); |
||||
} |
||||
} |
@ -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; |
||||
} |
@ -1,54 +1,69 @@
|
||||
import { Routes, RouterModule } from '@angular/router'; |
||||
import { NgModule } from '@angular/core'; |
||||
import { PlanComponent } from './plan/plan.component'; |
||||
import { TodayWarningComponent } from './today-warning/today-warning.component'; |
||||
import { CriminalRecordsComponent } from './records/criminal-records/criminal-records.component'; |
||||
import { AuthGuard } from '../auth.guard' |
||||
import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component'; |
||||
import { CriminalRecordsAdminComponent } from './records/criminal-records-admin/criminal-records-admin.component'; |
||||
import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component'; |
||||
import { EquipmentInfoComponent } from './equipment-info/equipment-info.component'; |
||||
import { PlanAdminComponent } from './plan-admin/plan-admin.component'; |
||||
import { HomePageComponent } from './home-page/home-page.component'; |
||||
import { OilUnloadingProcessListComponent } from './records/oil-unloading-process-list/oil-unloading-process-list.component'; |
||||
import { init3DGuard } from './init3D.guard'; |
||||
import { Routes, RouterModule } from "@angular/router"; |
||||
import { NgModule } from "@angular/core"; |
||||
import { PlanComponent } from "./plan/plan.component"; |
||||
import { TodayWarningComponent } from "./today-warning/today-warning.component"; |
||||
import { CriminalRecordsComponent } from "./records/criminal-records/criminal-records.component"; |
||||
import { AuthGuard } from "../auth.guard"; |
||||
import { TodayWarningAdminComponent } from "./today-warning-admin/today-warning-admin.component"; |
||||
import { CriminalRecordsAdminComponent } from "./records/criminal-records-admin/criminal-records-admin.component"; |
||||
import { OilStationInfoComponent } from "./oil-station-info/oil-station-info.component"; |
||||
import { EquipmentInfoComponent } from "./equipment-info/equipment-info.component"; |
||||
import { PlanAdminComponent } from "./plan-admin/plan-admin.component"; |
||||
import { HomePageComponent } from "./home-page/home-page.component"; |
||||
import { OilUnloadingProcessListComponent } from "./records/oil-unloading-process-list/oil-unloading-process-list.component"; |
||||
import { init3DGuard } from "./init3D.guard"; |
||||
|
||||
import { NavBarComponent } from './license/nav-bar/nav-bar.component'; |
||||
import { AuditNavComponent } from './audit/audit-nav/audit-nav.component'; |
||||
import { WarningStatisticsListComponent } from './records/warning-statistics-list/warning-statistics-list.component'; |
||||
import { RecordsNavComponent } from './records/records-nav/records-nav.component'; |
||||
import { DownImageComponent } from './down-image/down-image.component' |
||||
import { NavBarComponent } from "./license/nav-bar/nav-bar.component"; |
||||
import { AuditNavComponent } from "./audit/audit-nav/audit-nav.component"; |
||||
import { WarningStatisticsListComponent } from "./records/warning-statistics-list/warning-statistics-list.component"; |
||||
import { RecordsNavComponent } from "./records/records-nav/records-nav.component"; |
||||
import { DownImageComponent } from "./down-image/down-image.component"; |
||||
import { HomePageComprehensiveComponent } from "./home-page-comprehensive/home-page-comprehensive.component"; |
||||
|
||||
const routes: Routes = [ |
||||
{ path: 'homepage', component: HomePageComponent }, |
||||
{ path: 'plan', component: PlanAdminComponent }, |
||||
{ path: 'plan/petrolStation', component: PlanComponent, canActivate: [init3DGuard], }, |
||||
{ path: 'todaywarning', component: TodayWarningAdminComponent }, |
||||
{ path: 'todaywarning/petrolStation', component: TodayWarningComponent }, |
||||
{ |
||||
path: 'records_nav', component: RecordsNavComponent, children: [ |
||||
{ path: 'all', component: CriminalRecordsAdminComponent }, |
||||
{ path: 'oliunloadinglist', component: OilUnloadingProcessListComponent }, |
||||
{ path: 'warningstatisticslist', component: WarningStatisticsListComponent }, |
||||
] |
||||
}, |
||||
{ |
||||
path: 'records_nav/petrolStation', 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 } |
||||
|
||||
{ path: "homepage", component: HomePageComponent }, |
||||
{ path: "comprehensive", component: HomePageComprehensiveComponent }, |
||||
{ path: "plan", component: PlanAdminComponent }, |
||||
{ |
||||
path: "plan/petrolStation", |
||||
component: PlanComponent, |
||||
canActivate: [init3DGuard], |
||||
}, |
||||
{ path: "todaywarning", component: TodayWarningAdminComponent }, |
||||
{ path: "todaywarning/petrolStation", component: TodayWarningComponent }, |
||||
{ |
||||
path: "records_nav", |
||||
component: RecordsNavComponent, |
||||
children: [ |
||||
{ path: "all", component: CriminalRecordsAdminComponent }, |
||||
{ path: "oliunloadinglist", component: OilUnloadingProcessListComponent }, |
||||
{ |
||||
path: "warningstatisticslist", |
||||
component: WarningStatisticsListComponent, |
||||
}, |
||||
], |
||||
}, |
||||
{ |
||||
path: "records_nav/petrolStation", |
||||
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({ |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule] |
||||
imports: [RouterModule.forChild(routes)], |
||||
exports: [RouterModule], |
||||
}) |
||||
export class PagesRoutingModule { } |
||||
export class PagesRoutingModule {} |
||||
|
@ -1,161 +1,175 @@
|
||||
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core'; |
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { TreeService } from 'src/app/service/tree.service'; |
||||
import { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown'; |
||||
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } 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'; |
||||
import { Component, OnInit, ViewChild, ElementRef } from "@angular/core"; |
||||
import { HttpClient } from "@angular/common/http"; |
||||
import { TreeService } from "src/app/service/tree.service"; |
||||
import { FormBuilder, FormGroup, Validators } from "@angular/forms"; |
||||
import { |
||||
NzContextMenuService, |
||||
NzDropdownMenuComponent, |
||||
} from "ng-zorro-antd/dropdown"; |
||||
import { |
||||
NzFormatEmitEvent, |
||||
NzTreeComponent, |
||||
NzTreeNode, |
||||
} 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({ |
||||
selector: 'app-plan-admin', |
||||
templateUrl: './plan-admin.component.html', |
||||
styleUrls: ['./plan-admin.component.scss'] |
||||
selector: "app-plan-admin", |
||||
templateUrl: "./plan-admin.component.html", |
||||
styleUrls: ["./plan-admin.component.scss"], |
||||
}) |
||||
export class PlanAdminComponent implements OnInit { |
||||
|
||||
@ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent; |
||||
@ViewChild('child') oilStationListComponent!: OilStationListComponent;; |
||||
@ViewChild('child2') updateLicenseListComponent!: UpdateLicenseListComponent;; |
||||
@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) { } |
||||
@ViewChild("nzTreeComponent", { static: false }) |
||||
nzTreeComponent!: NzTreeComponent; |
||||
@ViewChild("child") oilStationListComponent!: OilStationListComponent; |
||||
@ViewChild("child2") updateLicenseListComponent!: UpdateLicenseListComponent; |
||||
@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 |
||||
) {} |
||||
|
||||
ngOnInit(): void { |
||||
this.getAllOrganization() |
||||
this.getAllOrganization(); |
||||
} |
||||
|
||||
|
||||
|
||||
//选择右侧tab页
|
||||
selectedTab = 0 |
||||
selectedTab = 0; |
||||
selectTab(index) { |
||||
this.selectedTab = index |
||||
this.selectedTab = index; |
||||
|
||||
if (this.selectedTab == 0) { |
||||
setTimeout(() => { |
||||
this.oilStationListComponent.list = [] |
||||
this.oilStationListComponent.SkipCount = '0' |
||||
this.oilStationListComponent.onChildMethod() |
||||
this.oilStationListComponent.list = []; |
||||
this.oilStationListComponent.SkipCount = "0"; |
||||
this.oilStationListComponent.onChildMethod(); |
||||
}, 0); |
||||
} |
||||
if (this.selectedTab == 1) { |
||||
setTimeout(() => { |
||||
this.updateLicenseListComponent.list = [] |
||||
this.updateLicenseListComponent.SkipCount = '0' |
||||
this.updateLicenseListComponent.onChildMethod() |
||||
this.updateLicenseListComponent.list = []; |
||||
this.updateLicenseListComponent.SkipCount = "0"; |
||||
this.updateLicenseListComponent.onChildMethod(); |
||||
}, 0); |
||||
} |
||||
if (this.selectedTab == 2) { |
||||
setTimeout(() => { |
||||
this.fileLicenseListComponent.list = [] |
||||
this.fileLicenseListComponent.SkipCount = '0' |
||||
this.fileLicenseListComponent.onChildMethod() |
||||
this.fileLicenseListComponent.list = []; |
||||
this.fileLicenseListComponent.SkipCount = "0"; |
||||
this.fileLicenseListComponent.onChildMethod(); |
||||
}, 0); |
||||
} |
||||
} |
||||
|
||||
|
||||
//获取所有组织机构
|
||||
nodes: any = [] |
||||
nzExpandAll = false |
||||
nzSelectedKeys: any = [] |
||||
orSpin: boolean = false |
||||
organization: any |
||||
nodes: any = []; |
||||
nzExpandAll = false; |
||||
nzSelectedKeys: any = []; |
||||
orSpin: boolean = false; |
||||
organization: any; |
||||
getAllOrganization() { |
||||
this.orSpin = true |
||||
let OrganizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id |
||||
this.orSpin = true; |
||||
let params = { |
||||
OrganizationUnitId: OrganizationUnitId, |
||||
IsContainsChildren: "true" |
||||
} |
||||
this.http.get('/api/services/app/Organization/GetAll', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
data.result.items = data.result.items.filter((item, i) => { |
||||
return !item.isGasStation |
||||
IsContainsChildren: "true", |
||||
}; |
||||
this.http |
||||
.get("/api/services/app/Organization/GetAll", { |
||||
params: params, |
||||
}) |
||||
this.organization = data.result.items |
||||
this.getStationsNum(data.result.items) |
||||
}) |
||||
.subscribe((data: any) => { |
||||
this.organization = data.result.items; |
||||
this.getStationsNum(data.result.items); |
||||
}); |
||||
} |
||||
|
||||
|
||||
//获得组织机构下有多少油站
|
||||
stationsList |
||||
getStationsNum(e) { |
||||
let OrganizationUnitId = JSON.parse(sessionStorage.getItem('userdata')).organization.id |
||||
this.http.get('/api/services/app/GasStation/GetCountsByOrganizations?IsContainsChildren=true').subscribe((data: any) => { |
||||
this.stationsList = data.result |
||||
const arrs = e.map(item => { |
||||
const data = this.stationsList.find(i => item.id == i.organizationId) |
||||
return { |
||||
...item, |
||||
products: data ? data : false |
||||
} |
||||
}) |
||||
for (let index = 0; index < arrs.length; index++) { |
||||
if (arrs[index].id == OrganizationUnitId) { |
||||
arrs[index].parentId = null |
||||
stationsList; |
||||
getStationsNum(currentOrList) { |
||||
console.log("e", currentOrList); |
||||
let OrganizationUnitId = JSON.parse(sessionStorage.getItem("userdata")) |
||||
.organization.id; |
||||
let OrganizationUnitIds = JSON.parse( |
||||
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 { |
||||
...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; |
||||
} |
||||
arrs[index].title = arrs[index].displayName |
||||
arrs[index].key = arrs[index].id |
||||
} |
||||
this.orSpin = false |
||||
this.nodes = [...this.toTree.toTree(arrs)] |
||||
this.nzExpandedKeys = [OrganizationUnitId] |
||||
this.nzSelectedKeys = [OrganizationUnitId] |
||||
sessionStorage.setItem('planAdminOrid', OrganizationUnitId) |
||||
this.oilStationListComponent.onChildMethod() |
||||
}) |
||||
this.orSpin = false; |
||||
this.nodes = [...this.toTree.toTree(arrs)]; |
||||
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; |
||||
//点击tree节点
|
||||
activeNode(data: NzFormatEmitEvent): void { |
||||
this.activatedNode = data.node!; |
||||
sessionStorage.setItem('planAdminOrid', data.node.origin.id) |
||||
sessionStorage.setItem("planAdminOrid", data.node.origin.id); |
||||
if (this.selectedTab == 0) { |
||||
setTimeout(() => { |
||||
this.oilStationListComponent.list = [] |
||||
this.oilStationListComponent.SkipCount = '0' |
||||
this.oilStationListComponent.onChildMethod() |
||||
this.oilStationListComponent.list = []; |
||||
this.oilStationListComponent.SkipCount = "0"; |
||||
this.oilStationListComponent.onChildMethod(); |
||||
}, 0); |
||||
} |
||||
if (this.selectedTab == 1) { |
||||
setTimeout(() => { |
||||
this.updateLicenseListComponent.list = [] |
||||
this.updateLicenseListComponent.SkipCount = '0' |
||||
this.updateLicenseListComponent.onChildMethod() |
||||
this.updateLicenseListComponent.list = []; |
||||
this.updateLicenseListComponent.SkipCount = "0"; |
||||
this.updateLicenseListComponent.onChildMethod(); |
||||
}, 0); |
||||
} |
||||
if (this.selectedTab == 2) { |
||||
setTimeout(() => { |
||||
this.fileLicenseListComponent.list = [] |
||||
this.fileLicenseListComponent.SkipCount = '0' |
||||
this.fileLicenseListComponent.onChildMethod() |
||||
this.fileLicenseListComponent.list = []; |
||||
this.fileLicenseListComponent.SkipCount = "0"; |
||||
this.fileLicenseListComponent.onChildMethod(); |
||||
}, 0); |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
expand(e, node) { |
||||
e.stopPropagation() |
||||
node.isExpanded = !node.isExpanded |
||||
e.stopPropagation(); |
||||
node.isExpanded = !node.isExpanded; |
||||
} |
||||
|
||||
} |
||||
|
@ -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({ |
||||
providedIn: 'root' |
||||
providedIn: "root", |
||||
}) |
||||
export class PatternService { |
||||
static isProd: any = true; |
||||
|
||||
constructor() { } |
||||
|
||||
public isProd: boolean = true //是否是生产环境
|
||||
constructor() {} |
||||
|
||||
public isProd: boolean = true; //是否是生产环境
|
||||
} |
||||
|
@ -1,284 +1,326 @@
|
||||
import { HttpClient } from '@angular/common/http'; |
||||
import { Component, OnInit, AfterViewInit, ViewChild, ViewContainerRef } from '@angular/core'; |
||||
import { TreeService } from 'src/app/service/tree.service'; |
||||
import { 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'; |
||||
import { HttpClient } from "@angular/common/http"; |
||||
import { |
||||
Component, |
||||
OnInit, |
||||
AfterViewInit, |
||||
ViewChild, |
||||
ViewContainerRef, |
||||
} from "@angular/core"; |
||||
import { TreeService } from "src/app/service/tree.service"; |
||||
import { |
||||
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({ |
||||
selector: 'app-analysis-of-the-host', |
||||
templateUrl: './analysis-of-the-host.component.html', |
||||
styleUrls: ['./analysis-of-the-host.component.scss'] |
||||
selector: "app-analysis-of-the-host", |
||||
templateUrl: "./analysis-of-the-host.component.html", |
||||
styleUrls: ["./analysis-of-the-host.component.scss"], |
||||
}) |
||||
export class AnalysisOfTheHostComponent implements OnInit { |
||||
|
||||
constructor(private fb: FormBuilder, private http: HttpClient, private toTree: TreeService, private modal: NzModalService, private message: NzMessageService, private viewContainerRef: ViewContainerRef) { } |
||||
constructor( |
||||
private fb: FormBuilder, |
||||
private http: HttpClient, |
||||
private toTree: TreeService, |
||||
private modal: NzModalService, |
||||
private message: NzMessageService, |
||||
private viewContainerRef: ViewContainerRef |
||||
) {} |
||||
ngOnInit(): void { |
||||
this.getAllOrganization() |
||||
this.getAllOrganization(); |
||||
} |
||||
|
||||
|
||||
//获取所有组织机构
|
||||
searchValue = ''; |
||||
searchValue = ""; |
||||
nzExpandAll = false; |
||||
totalCount: string |
||||
totalCount: string; |
||||
getAllOrganization() { |
||||
let OrganizationUnitId = sessionStorage.getItem('isGasStation') == 'true' ? JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id : JSON.parse(sessionStorage.getItem('userdata')).organization.id |
||||
let params = { |
||||
OrganizationUnitId: OrganizationUnitId, |
||||
IsContainsChildren: "true" |
||||
let userData = null; |
||||
if (sessionStorage.getItem("isGasStation") == "true") { |
||||
userData = JSON.parse(sessionStorage.getItem("userdataOfgasstation")); |
||||
} else { |
||||
userData = JSON.parse(sessionStorage.getItem("userdata")); |
||||
} |
||||
this.http.get('/api/services/app/Organization/GetAll', { |
||||
params: params |
||||
}).subscribe((data: any) => { |
||||
this.totalCount = data.result.totalCount |
||||
data.result.items.forEach(element => { |
||||
if (element.id == OrganizationUnitId) { |
||||
element.parentId = null |
||||
} |
||||
element.key = element.id |
||||
element.title = element.displayName |
||||
element.selectable = false |
||||
let OrganizationUnitId = userData.organization.id; |
||||
let OrganizationUnitIds = userData.organizations?.map((v) => v.id); |
||||
let params = { |
||||
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; |
||||
} |
||||
} else { |
||||
if (element.id == OrganizationUnitId) { |
||||
element.parentId = null; |
||||
} |
||||
} |
||||
element.key = element.id; |
||||
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 }) nzTreeComponent!: NzTreeComponent; |
||||
@ViewChild("nzTreeComponent", { static: false }) |
||||
nzTreeComponent!: NzTreeComponent; |
||||
|
||||
defaultExpandedKeys = []; |
||||
|
||||
nodes: any[] = [] |
||||
nzSelectedKeys: any[] = [] |
||||
selectedOilStation: any |
||||
nodes: any[] = []; |
||||
nzSelectedKeys: any[] = []; |
||||
selectedOilStation: any; |
||||
nzClick(event: NzFormatEmitEvent): void { |
||||
console.log(event.node.origin); |
||||
if (event.node.origin.isGasStation) {//如果点击的是加油站才生效
|
||||
this.nzSelectedKeys[0] = event.node.origin.id |
||||
this.nzSelectedKeys = [...this.nzSelectedKeys] |
||||
this.selectedOilStation = event.node.origin |
||||
this.getHost() |
||||
this.getCamera() |
||||
if (event.node.origin.isGasStation) { |
||||
//如果点击的是加油站才生效
|
||||
this.nzSelectedKeys[0] = event.node.origin.id; |
||||
this.nzSelectedKeys = [...this.nzSelectedKeys]; |
||||
this.selectedOilStation = event.node.origin; |
||||
this.getHost(); |
||||
this.getCamera(); |
||||
} else { |
||||
this.message.info('只有加油站才可以增加主机'); |
||||
this.message.info("只有加油站才可以增加主机"); |
||||
} |
||||
} |
||||
|
||||
//获得加油站的主机
|
||||
listOfData: any[] = []; |
||||
getHost() { |
||||
this.http.get('/api/services/app/EdgeDevice/GetAll', { |
||||
params: { |
||||
organizationUnitId: this.selectedOilStation.id, |
||||
SkipCount: '0', |
||||
MaxResultCount: '100', |
||||
} |
||||
}).subscribe((data: any) => { |
||||
console.log('主机列表', data.result.items) |
||||
this.listOfData = data.result.items |
||||
}) |
||||
this.http |
||||
.get("/api/services/app/EdgeDevice/GetAll", { |
||||
params: { |
||||
organizationUnitId: this.selectedOilStation.id, |
||||
SkipCount: "0", |
||||
MaxResultCount: "100", |
||||
}, |
||||
}) |
||||
.subscribe((data: any) => { |
||||
console.log("主机列表", data.result.items); |
||||
this.listOfData = data.result.items; |
||||
}); |
||||
} |
||||
|
||||
|
||||
//获得加油站摄像头
|
||||
listOfDataCamera: any[] = []; |
||||
getCamera() { |
||||
this.http.get('/api/services/app/Camera/GetAll', { |
||||
params: { |
||||
organizationUnitId: this.selectedOilStation.id, |
||||
SkipCount: '0', |
||||
MaxResultCount: '100', |
||||
} |
||||
}).subscribe((data: any) => { |
||||
// console.log('摄像头列表', data)
|
||||
this.listOfDataCamera = data.result.items |
||||
}) |
||||
this.http |
||||
.get("/api/services/app/Camera/GetAll", { |
||||
params: { |
||||
organizationUnitId: this.selectedOilStation.id, |
||||
SkipCount: "0", |
||||
MaxResultCount: "100", |
||||
}, |
||||
}) |
||||
.subscribe((data: any) => { |
||||
// console.log('摄像头列表', data)
|
||||
this.listOfDataCamera = data.result.items; |
||||
}); |
||||
} |
||||
|
||||
|
||||
ngAfterViewInit(): void { |
||||
|
||||
} |
||||
ngAfterViewInit(): void {} |
||||
|
||||
//新增分析主机
|
||||
addHost() { |
||||
console.log(this.selectedOilStation) |
||||
console.log(this.selectedOilStation); |
||||
const modal = this.modal.create({ |
||||
nzTitle: '新增加油站主机', |
||||
nzTitle: "新增加油站主机", |
||||
nzContent: AddhostComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: {}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
await new Promise((resolve) => { |
||||
console.log("表单信息", instance.validateForm); |
||||
let body = { |
||||
hostIPAddress: instance.validateForm.value.ip, |
||||
organizationUnitId: this.selectedOilStation.id |
||||
} |
||||
this.http.post('/api/services/app/EdgeDevice/Create', body).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '创建成功!'); |
||||
this.getHost() |
||||
return true |
||||
}) |
||||
}) |
||||
organizationUnitId: this.selectedOilStation.id, |
||||
}; |
||||
this.http |
||||
.post("/api/services/app/EdgeDevice/Create", body) |
||||
.subscribe((data) => { |
||||
resolve(data); |
||||
this.message.create("success", "创建成功!"); |
||||
this.getHost(); |
||||
return true; |
||||
}); |
||||
}); |
||||
} else { |
||||
this.message.create('warning', '请填写完整!'); |
||||
return false |
||||
this.message.create("warning", "请填写完整!"); |
||||
return false; |
||||
} |
||||
} |
||||
}, |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
edit(data) { |
||||
console.log(data) |
||||
console.log(data); |
||||
const modal = this.modal.create({ |
||||
nzTitle: '编辑加油站主机', |
||||
nzTitle: "编辑加油站主机", |
||||
nzContent: EdithostComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: { |
||||
ip: data.hostIPAddress |
||||
ip: data.hostIPAddress, |
||||
}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
data.hostIPAddress = instance.validateForm.value.ip, |
||||
this.http.put('/api/services/app/EdgeDevice/Update', data).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '修改成功!'); |
||||
this.getHost() |
||||
return true |
||||
}) |
||||
}) |
||||
await new Promise((resolve) => { |
||||
console.log("表单信息", instance.validateForm); |
||||
(data.hostIPAddress = instance.validateForm.value.ip), |
||||
this.http |
||||
.put("/api/services/app/EdgeDevice/Update", data) |
||||
.subscribe((data) => { |
||||
resolve(data); |
||||
this.message.create("success", "修改成功!"); |
||||
this.getHost(); |
||||
return true; |
||||
}); |
||||
}); |
||||
} else { |
||||
this.message.create('warning', '请填写完整!'); |
||||
return false |
||||
this.message.create("warning", "请填写完整!"); |
||||
return false; |
||||
} |
||||
} |
||||
}, |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
delete(item) { |
||||
console.log(item) |
||||
console.log(item); |
||||
this.modal.confirm({ |
||||
nzTitle: `确定要删除${item.name}这个主机吗?`, |
||||
nzOkText: '确定', |
||||
nzOkType: 'primary', |
||||
nzOkText: "确定", |
||||
nzOkType: "primary", |
||||
nzOnOk: () => { |
||||
this.http.delete('/api/services/app/EdgeDevice/Delete', { |
||||
params: { |
||||
Id: item.id |
||||
} |
||||
}).subscribe(data => { |
||||
this.message.create('success', '删除成功!'); |
||||
this.getHost() |
||||
}) |
||||
this.http |
||||
.delete("/api/services/app/EdgeDevice/Delete", { |
||||
params: { |
||||
Id: item.id, |
||||
}, |
||||
}) |
||||
.subscribe((data) => { |
||||
this.message.create("success", "删除成功!"); |
||||
this.getHost(); |
||||
}); |
||||
}, |
||||
nzCancelText: '取消' |
||||
nzCancelText: "取消", |
||||
}); |
||||
} |
||||
|
||||
|
||||
//摄像头
|
||||
addCamera() { |
||||
console.log(this.selectedOilStation) |
||||
console.log(this.selectedOilStation); |
||||
const modal = this.modal.create({ |
||||
nzTitle: '新增加油站摄像头', |
||||
nzTitle: "新增加油站摄像头", |
||||
nzContent: AddcameraComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: {}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
await new Promise((resolve) => { |
||||
console.log("表单信息", instance.validateForm); |
||||
let body = { |
||||
organizationUnitId: this.selectedOilStation.id, |
||||
ipAdress: instance.validateForm.value.ip, |
||||
code: instance.validateForm.value.code, |
||||
name: instance.validateForm.value.name, |
||||
// 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 { |
||||
this.message.create('warning', '请填写完整!'); |
||||
return false |
||||
this.message.create("warning", "请填写完整!"); |
||||
return false; |
||||
} |
||||
} |
||||
}, |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
editCamera(data) { |
||||
|
||||
console.log(data) |
||||
console.log(data); |
||||
const modal = this.modal.create({ |
||||
nzTitle: '编辑加油站摄像头', |
||||
nzTitle: "编辑加油站摄像头", |
||||
nzContent: EditcameraComponent, |
||||
nzViewContainerRef: this.viewContainerRef, |
||||
nzWidth: 288, |
||||
nzComponentParams: { |
||||
data: data |
||||
data: data, |
||||
}, |
||||
nzOnOk: async () => { |
||||
if (instance.validateForm.valid) { |
||||
await new Promise(resolve => { |
||||
console.log('表单信息', instance.validateForm) |
||||
data.name = instance.validateForm.value.name |
||||
data.code = instance.validateForm.value.code |
||||
data.ipAdress = instance.validateForm.value.ip |
||||
this.http.put('/api/services/app/Camera/Update', data).subscribe(data => { |
||||
resolve(data) |
||||
this.message.create('success', '编辑成功!'); |
||||
this.getCamera() |
||||
return true |
||||
}, err => { |
||||
return false |
||||
}) |
||||
}) |
||||
await new Promise((resolve) => { |
||||
console.log("表单信息", instance.validateForm); |
||||
data.name = instance.validateForm.value.name; |
||||
data.code = instance.validateForm.value.code; |
||||
data.ipAdress = instance.validateForm.value.ip; |
||||
this.http.put("/api/services/app/Camera/Update", data).subscribe( |
||||
(data) => { |
||||
resolve(data); |
||||
this.message.create("success", "编辑成功!"); |
||||
this.getCamera(); |
||||
return true; |
||||
}, |
||||
(err) => { |
||||
return false; |
||||
} |
||||
); |
||||
}); |
||||
} else { |
||||
this.message.create('warning', '请填写完整!'); |
||||
return false |
||||
this.message.create("warning", "请填写完整!"); |
||||
return false; |
||||
} |
||||
} |
||||
}, |
||||
}); |
||||
const instance = modal.getContentComponent(); |
||||
} |
||||
deleteCamera(item) { |
||||
console.log(item) |
||||
console.log(item); |
||||
this.modal.confirm({ |
||||
nzTitle: `确定要删除${item.name}这个摄像头吗?`, |
||||
nzOkText: '确定', |
||||
nzOkType: 'primary', |
||||
nzOkText: "确定", |
||||
nzOkType: "primary", |
||||
nzOnOk: () => { |
||||
this.http.delete('/api/services/app/Camera/Delete', { |
||||
params: { |
||||
Id: item.id |
||||
} |
||||
}).subscribe(data => { |
||||
this.message.create('success', '删除成功!'); |
||||
this.getCamera() |
||||
}) |
||||
this.http |
||||
.delete("/api/services/app/Camera/Delete", { |
||||
params: { |
||||
Id: item.id, |
||||
}, |
||||
}) |
||||
.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()); |
||||
} |
||||
} |
Before Width: | Height: | Size: 3.2 KiB |
Before Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 416 B |
Before Width: | Height: | Size: 286 B |
Before Width: | Height: | Size: 450 B |
Before Width: | Height: | Size: 716 B |
Before Width: | Height: | Size: 2.1 KiB |
Before Width: | Height: | Size: 8.1 KiB |
Before Width: | Height: | Size: 6.6 KiB |
Before Width: | Height: | Size: 7.6 KiB |
Before Width: | Height: | Size: 7.7 KiB |
Before Width: | Height: | Size: 8.0 KiB |