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

[完善]新增页面

test-assets
邵佳豪 4 months ago
parent
9070556c7c
commit
8d0f3c1ed1
11 changed files with 2191 additions and 132 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      angular.json
  2. 102
      src/app/http-interceptors/base-interceptor.ts
  3. 327
      src/app/pages/home-page-comprehensive/home-page-comprehensive.component.html
  4. 578
      src/app/pages/home-page-comprehensive/home-page-comprehensive.component.scss
  5. 1138
      src/app/pages/home-page-comprehensive/home-page-comprehensive.component.ts
  6. 11
      src/app/pages/home/home.component.html
  7. 50
      src/app/pages/home/home.component.scss
  8. 1
      src/app/pages/home/home.component.ts
  9. 2
      src/app/pages/login/login.component.html
  10. 109
      src/app/pages/pages-routing.module.ts
  11. 3
      src/app/pages/pages.module.ts

2
angular.json
Unescape View File

@ -18,7 +18,7 @@
"build": { "build": {
"builder": "@angular-devkit/build-angular:browser", "builder": "@angular-devkit/build-angular:browser",
"options": { "options": {
"baseHref": "/youzhan/", "baseHref": "/",
"outputPath": "dist/anxin119", "outputPath": "dist/anxin119",
"index": "src/index.html", "index": "src/index.html",
"main": "src/main.ts", "main": "src/main.ts",

102
src/app/http-interceptors/base-interceptor.ts
Unescape View File

@ -1,24 +1,27 @@
import { Injectable } from '@angular/core'; import { Injectable } from "@angular/core";
import { import {
HttpClient, HttpInterceptor, HttpHandler, HttpRequest, HttpClient,
HttpInterceptor,
HttpHandler,
HttpRequest,
HttpErrorResponse, HttpErrorResponse,
HttpResponse HttpResponse,
} from '@angular/common/http'; } from "@angular/common/http";
import { throwError } from 'rxjs' import { throwError } from "rxjs";
import { catchError, tap, finalize } from 'rxjs/operators'; import { catchError, tap, finalize } from "rxjs/operators";
import { Router } from '@angular/router' import { Router } from "@angular/router";
import { NzMessageService } from 'ng-zorro-antd/message'; import { NzMessageService } from "ng-zorro-antd/message";
//baseurl //baseurl
// const baseurl = 'http://39.106.78.171:8008'; // const baseurl = 'http://39.106.78.171:8008';
@Injectable() @Injectable()
export class BaseInterceptor implements HttpInterceptor { export class BaseInterceptor implements HttpInterceptor {
constructor(private router: Router, private message: NzMessageService) {}
constructor(private router: Router, private message: NzMessageService) { }
intercept(req, next: HttpHandler) { intercept(req, next: HttpHandler) {
// req.url = "/youzhan" + req.url;
// req.urlWithParams = "/youzhan" + req.urlWithParams;
let params = req.params; let params = req.params;
for (const key of req.params.keys()) { for (const key of req.params.keys()) {
if (params.get(key) === undefined || params.get(key) === null) { if (params.get(key) === undefined || params.get(key) === null) {
@ -33,77 +36,86 @@ export class BaseInterceptor implements HttpInterceptor {
}); });
if (!req.cancelToken) { if (!req.cancelToken) {
/*获取token*/ /*获取token*/
let token = sessionStorage.getItem("token") let token = sessionStorage.getItem("token");
/*此处设置额外请求头，token令牌*/ /*此处设置额外请求头，token令牌*/
if (!!token) { if (!!token) {
newReq.headers = newReq.headers.set('Authorization', `Bearer ${token}`) newReq.headers = newReq.headers.set("Authorization", `Bearer ${token}`);
} }
} }
// 携带请求头发送下一次请求 // 携带请求头发送下一次请求
return next.handle(newReq) return next.handle(newReq).pipe(
.pipe( tap(
tap(event => { (event) => {
if (event instanceof HttpResponse) { if (event instanceof HttpResponse) {
// 成功 // 成功
// console.log('成功', event.headers.get('x-refresh-encryptedtoken')) // console.log('成功', event.headers.get('x-refresh-encryptedtoken'))
if (!!event.headers.get('x-refresh-token')) { if (!!event.headers.get("x-refresh-token")) {
sessionStorage.setItem('token', event.headers.get('x-refresh-token')) sessionStorage.setItem(
sessionStorage.setItem('encryptedAccessToken', event.headers.get('x-refresh-encryptedtoken')) "token",
event.headers.get("x-refresh-token")
);
sessionStorage.setItem(
"encryptedAccessToken",
event.headers.get("x-refresh-encryptedtoken")
);
} }
} }
}, error => { },
(error) => {
// 失败 // 失败
console.log('请求http失败', error) console.log("请求http失败", error);
this.handleError(error) this.handleError(error);
}), }
finalize(() => { ),
// 请求完成 finalize(() => {
// console.log('complete') // 请求完成
}) // console.log('complete')
) })
);
} }
// 捕获错误 // 捕获错误
//401 token过期 403没权限!!! 400参数错误 404未找到 614刷新令牌过期!!! //401 token过期 403没权限!!! 400参数错误 404未找到 614刷新令牌过期!!!
private handleError(error: HttpErrorResponse) { private handleError(error: HttpErrorResponse) {
// 用户认证失败返回登录页 // 用户认证失败返回登录页
if (error.status === 401 || error.status === 614) { if (error.status === 401 || error.status === 614) {
sessionStorage.clear() sessionStorage.clear();
localStorage.removeItem("isautologin") localStorage.removeItem("isautologin");
this.message.create('error', `用户认证信息过期,请重新登录!`); this.message.create("error", `用户认证信息过期,请重新登录!`);
this.router.navigate(['/singlelogin']) this.router.navigate(["/singlelogin"]);
} }
if (error.status === 403) { if (error.status === 403) {
this.message.create('error', `对不起,您无此权限!`); this.message.create("error", `对不起,您无此权限!`);
} }
if (error.status === 400) { if (error.status === 400) {
this.message.create('error', `请核对您的输入信息或格式是否正确!`); this.message.create("error", `请核对您的输入信息或格式是否正确!`);
} }
if (error.status === 500) { if (error.status === 500) {
if (error.error.error.message) { if (error.error.error.message) {
this.message.create('error', `${error.error.error.details || error.error.error.message}`); this.message.create(
"error",
`${error.error.error.details || error.error.error.message}`
);
} else { } else {
this.message.create('error', `状态500`); this.message.create("error", `状态500`);
} }
} }
if (error.status === 404) { if (error.status === 404) {
this.message.create('error', `${error.error.error.message}`); this.message.create("error", `${error.error.error.message}`);
} }
if (error.error instanceof ErrorEvent) { if (error.error instanceof ErrorEvent) {
// 发生客户端或网络错误。相应处理。 // 发生客户端或网络错误。相应处理。
console.error('An error occurred:', error.error.error.message); console.error("An error occurred:", error.error.error.message);
} else { } else {
// 服务端返回http状态码 // 服务端返回http状态码
// 服务端返回错误信息 // 服务端返回错误信息
console.error( console.error(
`Backend returned code ${error.status}, ` + `Backend returned code ${error.status}, ` + `body was: ${error.error}`
`body was: ${error.error}`); );
} }
// 返回带有面向用户的错误信息 // 返回带有面向用户的错误信息
return throwError( return throwError(error);
error); }
};
} }

327
src/app/pages/home-page-comprehensive/home-page-comprehensive.component.html
Unescape View File

@ -0,0 +1,327 @@
<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">
</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>
<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"></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>
<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"></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>
</div>
</div>

578
src/app/pages/home-page-comprehensive/home-page-comprehensive.component.scss
Unescape View File

@ -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;
}

1138
src/app/pages/home-page-comprehensive/home-page-comprehensive.component.ts
View File

File diff suppressed because it is too large Load Diff

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

@ -26,17 +26,6 @@
<!-- 登录信息按钮 --> <!-- 登录信息按钮 -->
<div class="boxright"> <div class="boxright">
<!-- <a style="margin-right: 8px;cursor: pointer; margin-top: 3px;" nz-dropdown [nzDropdownMenu]="usermenu"
[nzTrigger]="'click'" [nzBackdrop]='false'>
<i nz-icon nzType="swap" nzTheme="outline"></i>
</a>
<nz-dropdown-menu #usermenu="nzDropdownMenu">
<ul nz-menu nzSelectable>
<li nz-menu-item (click)="switchUsers()">用户1</li>
<li nz-menu-item (click)="switchUsers()">用户2</li>
</ul>
</nz-dropdown-menu> -->
<i (click)="warningSwitch('voice')" nz-icon [ngClass]="{'grey': !isWarningVoice}" class="blue" <i (click)="warningSwitch('voice')" nz-icon [ngClass]="{'grey': !isWarningVoice}" class="blue"
style="margin-top: 2px;" nz-tooltip nzTooltipTitle="预警声音开关" nzTooltipPlacement="bottom"> style="margin-top: 2px;" nz-tooltip nzTooltipTitle="预警声音开关" nzTooltipPlacement="bottom">
<svg width="20" height="20"> <svg width="20" height="20">

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

@ -1,10 +1,10 @@
.blue { .blue {
color: #36A2FF; color: #36a2ff;
cursor: pointer; cursor: pointer;
} }
.grey { .grey {
color: #FFFFFF; color: #ffffff;
opacity: 0.6; opacity: 0.6;
} }
@ -13,39 +13,41 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
// background-image: radial-gradient(closest-side at 50% 55%,#03447c, #02325c, #002046); // background-image: radial-gradient(closest-side at 50% 55%,#03447c, #02325c, #002046);
background: radial-gradient(closest-side at 50% 55%, #004988 0%, #00122D 100%); background: radial-gradient(
closest-side at 50% 55%,
#004988 0%,
#00122d 100%
);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.menu { .menu {
height: 56px; height: 56px;
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: center;
font-size: 17px; font-size: 17px;
background: url('../../../assets/images/navbg.png') no-repeat; background: url("../../../assets/images/navbg.png") no-repeat;
background-size: 100% 115%; background-size: 100% 115%;
position: relative; position: relative;
.libox { .libox {
width: 33%; width: 35%;
display: flex; display: flex;
justify-content: center;
li { li {
flex: 1; // flex: 1;
box-sizing: border-box;
padding: 0 20px;
height: 52px; height: 52px;
line-height: 52px; line-height: 52px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
font-family: sybold; font-family: sybold;
color: #EBFAFF; color: #ebfaff;
} }
} }
} }
.boxleft { .boxleft {
@ -67,7 +69,7 @@
span { span {
font-size: 16px; font-size: 16px;
color: #FFFFFF; color: #ffffff;
opacity: 0.6; opacity: 0.6;
} }
@ -77,7 +79,6 @@
} }
} }
.backbtn { .backbtn {
position: absolute; position: absolute;
left: 205px; left: 205px;
@ -87,9 +88,9 @@
width: 64px; width: 64px;
height: 32px; height: 32px;
background: rgba(0, 129, 255, 0.3); background: rgba(0, 129, 255, 0.3);
border: 1px solid #36A2FF; border: 1px solid #36a2ff;
border-radius: 0px; border-radius: 0px;
color: #91CCFF; color: #91ccff;
} }
} }
@ -115,7 +116,7 @@
.today { .today {
font-size: 19px; font-size: 19px;
font-family: titlefont; font-family: titlefont;
color: #D0EAFF; color: #d0eaff;
margin-top: 11px; margin-top: 11px;
margin-left: 10px; margin-left: 10px;
} }
@ -124,13 +125,17 @@
.content { .content {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
.router-link-active { .router-link-active {
// background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, #1c8199 50%, rgba(35, 153, 255, 0) 100%); // background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, #1c8199 50%, rgba(35, 153, 255, 0) 100%);
background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, #36A2FF 50%, rgba(35, 153, 255, 0) 100%); background: linear-gradient(
270deg,
rgba(35, 153, 255, 0) 0%,
#36a2ff 50%,
rgba(35, 153, 255, 0) 100%
);
} }
// 适配125% // 适配125%
@ -140,8 +145,6 @@
font-size: 14px; font-size: 14px;
.libox { .libox {
width: 33%;
li { li {
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
@ -190,13 +193,11 @@
// 适配150% // 适配150%
@media screen and (max-height: 600px) { @media screen and (max-height: 600px) {
.menu { .menu {
height: 32px; height: 32px;
font-size: 8px; font-size: 8px;
.libox { .libox {
width: 33%;
li { li {
height: 32px; height: 32px;
@ -229,7 +230,6 @@
} }
} }
.backbtn { .backbtn {
left: 156px; left: 156px;
bottom: 0px; bottom: 0px;
@ -243,6 +243,4 @@
padding: 0; padding: 0;
} }
} }
} }

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

@ -71,6 +71,7 @@ export class HomeComponent implements OnInit {
//菜单 //菜单
menu1 = [ menu1 = [
{ name: "AI视频预警统计", url: "/comprehensive" },
{ name: "首页", url: "/homepage" }, { name: "首页", url: "/homepage" },
{ name: "数字油站", url: "/plan" }, { name: "数字油站", url: "/plan" },
{ name: "今日预警", url: "/todaywarning" }, { name: "今日预警", url: "/todaywarning" },

2
src/app/pages/login/login.component.html
Unescape View File

@ -43,7 +43,7 @@
<div class="name"> <div class="name">
<img *ngIf="isProd" src="../../../assets/images/logo2.png" alt=""> <img *ngIf="isProd" src="assets/images/logo2.png" alt="">
</div> </div>
</div> </div>

109
src/app/pages/pages-routing.module.ts
Unescape View File

@ -1,54 +1,69 @@
import { Routes, RouterModule } from '@angular/router'; import { Routes, RouterModule } from "@angular/router";
import { NgModule } from '@angular/core'; import { NgModule } from "@angular/core";
import { PlanComponent } from './plan/plan.component'; import { PlanComponent } from "./plan/plan.component";
import { TodayWarningComponent } from './today-warning/today-warning.component'; import { TodayWarningComponent } from "./today-warning/today-warning.component";
import { CriminalRecordsComponent } from './records/criminal-records/criminal-records.component'; import { CriminalRecordsComponent } from "./records/criminal-records/criminal-records.component";
import { AuthGuard } from '../auth.guard' import { AuthGuard } from "../auth.guard";
import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component'; import { TodayWarningAdminComponent } from "./today-warning-admin/today-warning-admin.component";
import { CriminalRecordsAdminComponent } from './records/criminal-records-admin/criminal-records-admin.component'; import { CriminalRecordsAdminComponent } from "./records/criminal-records-admin/criminal-records-admin.component";
import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component'; import { OilStationInfoComponent } from "./oil-station-info/oil-station-info.component";
import { EquipmentInfoComponent } from './equipment-info/equipment-info.component'; import { EquipmentInfoComponent } from "./equipment-info/equipment-info.component";
import { PlanAdminComponent } from './plan-admin/plan-admin.component'; import { PlanAdminComponent } from "./plan-admin/plan-admin.component";
import { HomePageComponent } from './home-page/home-page.component'; import { HomePageComponent } from "./home-page/home-page.component";
import { OilUnloadingProcessListComponent } from './records/oil-unloading-process-list/oil-unloading-process-list.component'; import { OilUnloadingProcessListComponent } from "./records/oil-unloading-process-list/oil-unloading-process-list.component";
import { init3DGuard } from './init3D.guard'; import { init3DGuard } from "./init3D.guard";
import { NavBarComponent } from './license/nav-bar/nav-bar.component'; import { NavBarComponent } from "./license/nav-bar/nav-bar.component";
import { AuditNavComponent } from './audit/audit-nav/audit-nav.component'; import { AuditNavComponent } from "./audit/audit-nav/audit-nav.component";
import { WarningStatisticsListComponent } from './records/warning-statistics-list/warning-statistics-list.component'; import { WarningStatisticsListComponent } from "./records/warning-statistics-list/warning-statistics-list.component";
import { RecordsNavComponent } from './records/records-nav/records-nav.component'; import { RecordsNavComponent } from "./records/records-nav/records-nav.component";
import { DownImageComponent } from './down-image/down-image.component' import { DownImageComponent } from "./down-image/down-image.component";
import { HomePageComprehensiveComponent } from "./home-page-comprehensive/home-page-comprehensive.component";
const routes: Routes = [ const routes: Routes = [
{ path: 'homepage', component: HomePageComponent }, { path: "homepage", component: HomePageComponent },
{ path: 'plan', component: PlanAdminComponent }, { path: "comprehensive", component: HomePageComprehensiveComponent },
{ path: 'plan/petrolStation', component: PlanComponent, canActivate: [init3DGuard], }, { path: "plan", component: PlanAdminComponent },
{ path: 'todaywarning', component: TodayWarningAdminComponent }, {
{ path: 'todaywarning/petrolStation', component: TodayWarningComponent }, path: "plan/petrolStation",
{ component: PlanComponent,
path: 'records_nav', component: RecordsNavComponent, children: [ canActivate: [init3DGuard],
{ path: 'all', component: CriminalRecordsAdminComponent }, },
{ path: 'oliunloadinglist', component: OilUnloadingProcessListComponent }, { path: "todaywarning", component: TodayWarningAdminComponent },
{ path: 'warningstatisticslist', component: WarningStatisticsListComponent }, { path: "todaywarning/petrolStation", component: TodayWarningComponent },
] {
}, path: "records_nav",
{ component: RecordsNavComponent,
path: 'records_nav/petrolStation', component: RecordsNavComponent, children: [ children: [
{ path: 'all', component: CriminalRecordsComponent }, { path: "all", component: CriminalRecordsAdminComponent },
{ path: 'oliunloadinglist', component: OilUnloadingProcessListComponent }, { path: "oliunloadinglist", component: OilUnloadingProcessListComponent },
{ path: 'warningstatisticslist', component: WarningStatisticsListComponent } {
] 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: "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({ @NgModule({
imports: [RouterModule.forChild(routes)], imports: [RouterModule.forChild(routes)],
exports: [RouterModule] exports: [RouterModule],
}) })
export class PagesRoutingModule { } export class PagesRoutingModule {}

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

@ -95,10 +95,11 @@ import { DownImageComponent } from './down-image/down-image.component';
import { ImgLookComponent } from './audit/img-look/img-look.component'; import { ImgLookComponent } from './audit/img-look/img-look.component';
import { AnxinImgLookComponent } from './oil-unloading-process/anxin-img-look/anxin-img-look.component'; import { AnxinImgLookComponent } from './oil-unloading-process/anxin-img-look/anxin-img-look.component';
import { SingleloginComponent } from './singlelogin/singlelogin.component'; import { SingleloginComponent } from './singlelogin/singlelogin.component';
import { HomePageComprehensiveComponent } from './home-page-comprehensive/home-page-comprehensive.component';
@NgModule({ @NgModule({
declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,
TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent,
AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent, RecordsNavComponent, UserDetailsComponent, AppealDetailsComponent, fileName, SystemModelComponent, ForgetComponent, HomePageNologinComponent, DownImageComponent, ImgLookComponent, AnxinImgLookComponent, SingleloginComponent], AddequipmentComponent, EditequipmentComponent, PlanAdminComponent, GetOutOfLineDetailsComponent, DispositionComponent, OilUnloadingProcessComponent, HomePageComponent, OilUnloadingProcessListComponent, ChangePasswordComponent, FacilitySortPipe, WarningStatisticsListComponent, DisposeequipmentComponent, NavBarComponent, InformComponent, UpdateCategoryComponent, FileCategoryComponent, HistoriesComponent, EditUpdateCategoryComponent, DetailsUpdateCategoryComponent, EditFileCategoryComponent, DetailsFileCategoryComponent, PdfWordLookComponent, OilStationListComponent, UpdateLicenseListComponent, FileLicenseListComponent, AuditNavComponent, AuditIngComponent, AuditRecordComponent, AuditInformTimeComponent, AuditDisposeComponent, EditInformTimeComponent, AuditDetailsInformTimeComponent, auditStatusPipe, GasBaseInfoComponent, notificationContent, licenseViolationType, handleState, AnnualInspectionComponent, EditAnnualInspectionComponent, RecordsNavComponent, UserDetailsComponent, AppealDetailsComponent, fileName, SystemModelComponent, ForgetComponent, HomePageNologinComponent, DownImageComponent, ImgLookComponent, AnxinImgLookComponent, SingleloginComponent, HomePageComprehensiveComponent],
imports: [ imports: [

Write Preview
Loading…
Cancel
Save