From 8d0f3c1ed1423ab125e68399f64b76c3d6f3c3b4 Mon Sep 17 00:00:00 2001 From: Sjh <55341701@qq.com> Date: Wed, 11 Sep 2024 10:03:31 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E6=96=B0=E5=A2=9E=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- angular.json | 2 +- src/app/http-interceptors/base-interceptor.ts | 102 +- .../home-page-comprehensive.component.html | 327 +++++ .../home-page-comprehensive.component.scss | 578 +++++++++ .../home-page-comprehensive.component.ts | 1138 +++++++++++++++++ src/app/pages/home/home.component.html | 11 - src/app/pages/home/home.component.scss | 50 +- src/app/pages/home/home.component.ts | 1 + src/app/pages/login/login.component.html | 2 +- src/app/pages/pages-routing.module.ts | 109 +- src/app/pages/pages.module.ts | 3 +- 11 files changed, 2191 insertions(+), 132 deletions(-) create mode 100644 src/app/pages/home-page-comprehensive/home-page-comprehensive.component.html create mode 100644 src/app/pages/home-page-comprehensive/home-page-comprehensive.component.scss create mode 100644 src/app/pages/home-page-comprehensive/home-page-comprehensive.component.ts diff --git a/angular.json b/angular.json index aacb0f1..3f0ee52 100644 --- a/angular.json +++ b/angular.json @@ -18,7 +18,7 @@ "build": { "builder": "@angular-devkit/build-angular:browser", "options": { - "baseHref": "/youzhan/", + "baseHref": "/", "outputPath": "dist/anxin119", "index": "src/index.html", "main": "src/main.ts", diff --git a/src/app/http-interceptors/base-interceptor.ts b/src/app/http-interceptors/base-interceptor.ts index 7fa97c5..100cec4 100644 --- a/src/app/http-interceptors/base-interceptor.ts +++ b/src/app/http-interceptors/base-interceptor.ts @@ -1,24 +1,27 @@ -import { Injectable } from '@angular/core'; +import { Injectable } from "@angular/core"; import { - HttpClient, HttpInterceptor, HttpHandler, HttpRequest, + HttpClient, + HttpInterceptor, + HttpHandler, + HttpRequest, HttpErrorResponse, - HttpResponse -} from '@angular/common/http'; + HttpResponse, +} from "@angular/common/http"; -import { throwError } from 'rxjs' -import { catchError, tap, finalize } from 'rxjs/operators'; -import { Router } from '@angular/router' -import { NzMessageService } from 'ng-zorro-antd/message'; +import { throwError } from "rxjs"; +import { catchError, tap, finalize } from "rxjs/operators"; +import { Router } from "@angular/router"; +import { NzMessageService } from "ng-zorro-antd/message"; //baseurl // const baseurl = 'http://39.106.78.171:8008'; @Injectable() export class BaseInterceptor implements HttpInterceptor { - - constructor(private router: Router, private message: NzMessageService) { } + constructor(private router: Router, private message: NzMessageService) {} intercept(req, next: HttpHandler) { - + // req.url = "/youzhan" + req.url; + // req.urlWithParams = "/youzhan" + req.urlWithParams; let params = req.params; for (const key of req.params.keys()) { if (params.get(key) === undefined || params.get(key) === null) { @@ -33,77 +36,86 @@ export class BaseInterceptor implements HttpInterceptor { }); if (!req.cancelToken) { /*获取token*/ - let token = sessionStorage.getItem("token") + let token = sessionStorage.getItem("token"); /*此处设置额外请求头，token令牌*/ if (!!token) { - newReq.headers = newReq.headers.set('Authorization', `Bearer ${token}`) + newReq.headers = newReq.headers.set("Authorization", `Bearer ${token}`); } - } // 携带请求头发送下一次请求 - return next.handle(newReq) - .pipe( - tap(event => { + return next.handle(newReq).pipe( + tap( + (event) => { if (event instanceof HttpResponse) { // 成功 // console.log('成功', event.headers.get('x-refresh-encryptedtoken')) - if (!!event.headers.get('x-refresh-token')) { - sessionStorage.setItem('token', event.headers.get('x-refresh-token')) - sessionStorage.setItem('encryptedAccessToken', event.headers.get('x-refresh-encryptedtoken')) + if (!!event.headers.get("x-refresh-token")) { + sessionStorage.setItem( + "token", + event.headers.get("x-refresh-token") + ); + sessionStorage.setItem( + "encryptedAccessToken", + event.headers.get("x-refresh-encryptedtoken") + ); } } - }, error => { + }, + (error) => { // 失败 - console.log('请求http失败', error) - this.handleError(error) - }), - finalize(() => { - // 请求完成 - // console.log('complete') - }) - ) + console.log("请求http失败", error); + this.handleError(error); + } + ), + finalize(() => { + // 请求完成 + // console.log('complete') + }) + ); } - // 捕获错误 + // 捕获错误 //401 token过期 403没权限!!! 400参数错误 404未找到 614刷新令牌过期!!! private handleError(error: HttpErrorResponse) { // 用户认证失败返回登录页 if (error.status === 401 || error.status === 614) { - sessionStorage.clear() - localStorage.removeItem("isautologin") - this.message.create('error', `用户认证信息过期,请重新登录!`); - this.router.navigate(['/singlelogin']) + sessionStorage.clear(); + localStorage.removeItem("isautologin"); + this.message.create("error", `用户认证信息过期,请重新登录!`); + this.router.navigate(["/singlelogin"]); } if (error.status === 403) { - this.message.create('error', `对不起,您无此权限!`); + this.message.create("error", `对不起,您无此权限!`); } if (error.status === 400) { - this.message.create('error', `请核对您的输入信息或格式是否正确!`); + this.message.create("error", `请核对您的输入信息或格式是否正确!`); } if (error.status === 500) { 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 { - this.message.create('error', `状态500`); + this.message.create("error", `状态500`); } } 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) { // 发生客户端或网络错误。相应处理。 - console.error('An error occurred:', error.error.error.message); + console.error("An error occurred:", error.error.error.message); } else { // 服务端返回http状态码 // 服务端返回错误信息 console.error( - `Backend returned code ${error.status}, ` + - `body was: ${error.error}`); + `Backend returned code ${error.status}, ` + `body was: ${error.error}` + ); } // 返回带有面向用户的错误信息 - return throwError( - error); - }; + return throwError(error); + } } diff --git a/src/app/pages/home-page-comprehensive/home-page-comprehensive.component.html b/src/app/pages/home-page-comprehensive/home-page-comprehensive.component.html new file mode 100644 index 0000000..53cd5ec --- /dev/null +++ b/src/app/pages/home-page-comprehensive/home-page-comprehensive.component.html @@ -0,0 +1,327 @@ +
+ +
+
+ + {{totalCount}} + 今日预警 +
+
+ + +
+
+
    +
  • +
    + + 您有一条新的预警信息!{{item.notification.data.violationName}} +
    +
    + 查看 + 忽略 +
    +
    • +
+
    +
+
+
+
+
+ +
+
+ +
+
+
+
+
+ +
+
+ 近30天事件排名 +
+
+
+
+ + {{'0' + (key + 1)}} + + + {{key + 1}} + +
+ {{item.eventSystemName}} +
+
+
+
+
+
+
+
+ {{item.count}} +
+
+
+ +
+
+ 近30天油站排名 +
+
+
+
+ + {{'0' + (key + 1)}} + + + {{key + 1}} + +
+ {{item.companyName}} {{item.stationName}} +
+
+
+
+
+
+
+
+ {{item.count}} +
+
+
+ +
+ +
+
+ +
+ {{HomeAggregatioData.dev.stationCount}} + 接入油站(个) +
+
+
+ +
+ {{HomeAggregatioData.dev.violationCount}} + 预警分析模型(个) +
+
+
+ +
+ {{HomeAggregatioData.dev.cameraCount}} + 摄像头(个) +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ 近30天事件排名 +
+
+
+
+ + {{'0' + (key + 1)}} + + + {{key + 1}} + +
+ {{item.eventSystemName}} +
+
+
+
+
+
+
+
+ {{item.count}} +
+
+
+ + +
+
+ 近30天油站排名 +
+
+
+
+ + {{'0' + (key + 1)}} + + + {{key + 1}} + +
+ {{item.companyName}} {{item.stationName}} +
+
+
+
+
+
+
+
+ {{item.count}} +
+
+
+ + +
+ +
+
+ +
+ {{HomeAggregatioData.dev.stationCount}} + 接入油站(个) +
+
+
+ +
+ {{HomeAggregatioData.dev.violationCount}} + 预警分析模型(个) +
+
+
+ +
+ {{HomeAggregatioData.dev.cameraCount}} + 摄像头(个) +
+
+ +
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+ 油站近30天预警事件统计 +
+
+
+
+
+
+ +
+
+
+
+ 油库近30天预警事件统计 +
+
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+ 油站近30天卸油预警走势 +
+
+
+
+
+
+ +
+
+
+
+ 累计卸油总车次 +
+ {{HomeAggregatioData.ouViolationType.ouTotalCount}} +
+
+
+
+ 累计卸油预警车次 +
+ {{HomeAggregatioData.ouViolationType.ouNotCorrectCount}} +
+
+
+
+
+
+ 油库近30天发油预警走势 +
+
+
+
+
+
+ +
+
+
+
+ 累计发油总车次 +
+ {{HomeAggregatioData.ouViolationType.ouTotalCount}} +
+
+
+
+ 累计发油预警车次 +
+ {{HomeAggregatioData.ouViolationType.ouNotCorrectCount}} +
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/pages/home-page-comprehensive/home-page-comprehensive.component.scss b/src/app/pages/home-page-comprehensive/home-page-comprehensive.component.scss new file mode 100644 index 0000000..c2cd251 --- /dev/null +++ b/src/app/pages/home-page-comprehensive/home-page-comprehensive.component.scss @@ -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; +} diff --git a/src/app/pages/home-page-comprehensive/home-page-comprehensive.component.ts b/src/app/pages/home-page-comprehensive/home-page-comprehensive.component.ts new file mode 100644 index 0000000..44feadc --- /dev/null +++ b/src/app/pages/home-page-comprehensive/home-page-comprehensive.component.ts @@ -0,0 +1,1138 @@ +import { HttpClient } from "@angular/common/http"; +import { Component, OnInit, ViewContainerRef } from "@angular/core"; +import { Router } from "@angular/router"; +import * as echarts from "echarts"; +import * as moment from "moment"; +import { NzModalService } from "ng-zorro-antd/modal"; +import { GetOutOfLineDetailsComponent } from "../today-warning/get-out-of-line-details/get-out-of-line-details.component"; +import { NzMessageService } from "ng-zorro-antd/message"; +import { DisposeequipmentComponent } from "../records/warning-statistics-list/disposeequipment/disposeequipment.component"; +import { listRefreshService } from "../../service/listRefresh.service"; +declare var tools; +@Component({ + selector: "app-home-page-comprehensive", + templateUrl: "./home-page-comprehensive.component.html", + styleUrls: ["./home-page-comprehensive.component.scss"], +}) +export class HomePageComprehensiveComponent implements OnInit { + constructor( + private listRefreshService: listRefreshService, + private http: HttpClient, + private router: Router, + private modal: NzModalService, + private viewContainerRef: ViewContainerRef, + private message: NzMessageService + ) {} + warningechartpieAll; //全部预警饼图 + warningechartpieOptionAll = { + color: [ + "#91CCFF", + "#46DFFF", + "#36A2FF", + "#FF6181", + "#B4C3FF", + "#FF9963", + "#5A9CFF", + "#4BFFD4", + "#46DFFF", + "#91CCFF", + ], + tooltip: { + trigger: "item", //触发类型 + }, + // legend: { + // top: '1%', + // // left: '25.5%', + // itemGap: 6, + // itemWidth: 6, + // itemHeight: 6, + // formatter: (name) => { + // return '{a|' + name + '}'; + // }, + // textStyle: { + // color: '#fff', + // rich: { + // a: { + // width: 50 + // } + // } + // } + // }, + series: [ + { + type: "pie", + radius: ["65%", "85%"], + // top: '2%', + avoidLabelOverlap: false, //防止标签重叠策略 + emphasis: { + //中间高亮区域 + show: true, + }, + data: [], + tooltip: { + //鼠标移入提示 + position: "right", + padding: [14, 19], + backgroundColor: "rgba(28, 129, 218, 0.4)", + textStyle: { + color: "#fff", + fontSize: 12, + }, + formatter: "{b} : {c} ({d}%)", + extraCssText: "z-index:2", + }, + label: { + normal: { + show: true, + position: "center", + color: "#4c4a4a", + formatter: "", + rich: { + total: { + fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, + textShadowColor: "#8df", + textShadowBlur: 3, + color: "#fff", + }, + active: { + fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, + color: "#fff", + fontFamily: "Microsoft YaHei", + }, + }, + }, + emphasis: { + //中间文字显示 + show: true, + }, + }, + }, + ], + }; + + warningechartpie; //30天预警饼图 + warningechartpieOption = { + color: [ + "#91CCFF", + "#46DFFF", + "#36A2FF", + "#FF6181", + "#B4C3FF", + "#FF9963", + "#5A9CFF", + "#4BFFD4", + "#46DFFF", + "#91CCFF", + ], + tooltip: { + trigger: "item", //触发类型 + }, + legend: { + top: "5%", + left: "25.5%", + itemGap: 8, + itemWidth: 6, + itemHeight: 6, + formatter: (name) => { + return "{a|" + name + "}"; + }, + textStyle: { + color: "#fff", + rich: { + a: { + width: 60, + }, + }, + }, + }, + series: [ + { + type: "pie", + radius: ["50%", "60%"], + bottom: "-5%", + right: "77%", + avoidLabelOverlap: false, //防止标签重叠策略 + emphasis: { + //中间高亮区域 + show: true, + }, + data: [], + tooltip: { + //鼠标移入提示 + position: "right", + padding: [14, 19], + backgroundColor: "rgba(28, 129, 218, 0.4)", + textStyle: { + color: "#fff", + fontSize: 12, + }, + formatter: "{b} : {c} ({d}%)", + extraCssText: "z-index:2", + }, + label: { + normal: { + show: true, + position: "center", + color: "#4c4a4a", + formatter: "", + rich: { + total: { + fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, + textShadowColor: "#8df", + textShadowBlur: 3, + color: "#fff", + }, + active: { + fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, + color: "#fff", + fontFamily: "Microsoft YaHei", + }, + }, + }, + emphasis: { + //中间文字显示 + show: true, + }, + }, + }, + ], + }; + + warningechartbar; //预警折线图 + warningechartbarOption = { + xAxis: { + type: "category", + data: [], + axisLine: { + show: false, + lineStyle: { + color: "#91CCFF", + }, + }, + axisTick: { + //刻度线 + show: false, + }, + // inverse: true + }, + yAxis: { + type: "value", + nameTextStyle: { + color: "#C4E2FC", + }, + splitLine: { + //分割线 + lineStyle: { + color: ["#0f4374"], + width: 2, + }, + }, + axisTick: { + //刻度线 + show: false, + }, + axisLine: { + //轴线 + show: false, + lineStyle: { + color: "#C4E2FC", + }, + }, + }, + tooltip: { + // trigger: 'axis'//触发类型 + }, + series: [ + { + data: [ + 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, + 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, + 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, + ], + type: "bar", + itemStyle: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "#23F0FF", // 0% 处的颜色 + }, + { + offset: 1, + color: "rgba(35, 153, 255, 0.1)", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + barWidth: "35%", + }, + { + data: [ + 4000, 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, + 3000, 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, 4000, 3000, + 4000, 4000, 4000, 4000, 3000, 4000, 4000, 4000, + ], + type: "line", + symbol: "circle", + symbolSize: 5, + label: { + normal: { + show: true, + formatter: function (dataObj) { + const { dataIndex, value } = dataObj; + let labelText = value; + + labelText = ""; + if (dataIndex % 1 === 0) { + // 每隔三个x坐标显示一个 + labelText = value; + } + + return `${labelText}`; + }, + }, + }, + itemStyle: { + color: "#fff", + shadowColor: "#fff", + shadowBlur: 10, + }, + lineStyle: { + color: "#FFCC8A", + width: 1, + }, + }, + ], + grid: { + left: "40px", + right: "30px", + bottom: "38px", + top: "30px", + }, + }; + + oilchartpie; //卸油饼图 + oilchartpieOption = { + color: [ + "#91CCFF", + "#46DFFF", + "#36A2FF", + "#FF6181", + "#B4C3FF", + "#FF9963", + "#5A9CFF", + "#4BFFD4", + "#46DFFF", + "#91CCFF", + ], + tooltip: { + trigger: "item", //触发类型 + }, + legend: { + top: "5%", + left: "25%", + itemGap: 8, + itemWidth: 6, + itemHeight: 6, + formatter: (name) => { + // return name.length > 7 ? name.substr(0, 7) + "..." : name; + return name; + }, + textStyle: { + color: "#fff", + rich: { + a: { + width: 80, + }, + }, + }, + }, + series: [ + { + type: "pie", + radius: ["50%", "60%"], + bottom: "8%", + right: "77%", + avoidLabelOverlap: false, //防止标签重叠策略 + label: { + normal: { + show: true, + position: "center", + color: "#4c4a4a", + formatter: "", + rich: { + total: { + fontSize: document.documentElement.clientHeight < 750 ? 20 : 35, + textShadowColor: "#8df", + textShadowBlur: 3, + color: "#fff", + }, + active: { + fontSize: document.documentElement.clientHeight < 750 ? 12 : 14, + color: "#fff", + // fontFamily: 'Microsoft YaHei', + }, + }, + }, + emphasis: { + //中间文字显示 + show: true, + }, + }, + data: [], + tooltip: { + //鼠标移入提示 + position: "right", + padding: [14, 19], + backgroundColor: "rgba(28, 129, 218, 0.4)", + textStyle: { + color: "#fff", + fontSize: 12, + }, + formatter: "{b} : {c} ({d}%)", + extraCssText: "z-index:2", + }, + }, + ], + }; + + oilchartpieOptionPieData1: any; + + oilchartbar; //卸油折线图 + oilchartbarOption = { + xAxis: { + type: "category", + data: [], + axisLine: { + show: false, + lineStyle: { + color: "#91CCFF", + }, + }, + axisTick: { + //刻度线 + show: false, + }, + // inverse: true + }, + yAxis: { + type: "value", + nameTextStyle: { + color: "#C4E2FC", + }, + splitLine: { + //分割线 + lineStyle: { + color: ["#0f4374"], + width: 2, + }, + }, + axisTick: { + //刻度线 + show: false, + }, + axisLine: { + //轴线 + show: false, + lineStyle: { + color: "#C4E2FC", + }, + }, + }, + tooltip: { + // // trigger: 'axis' + }, + series: [ + { + name: "卸油事件", + data: [], + type: "bar", + itemStyle: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "#23F0FF", // 0% 处的颜色 + }, + { + offset: 1, + color: "rgba(35, 153, 255, 0.1)", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + barWidth: "25%", + }, + { + name: "卸油事件", + data: [], + type: "line", + symbol: "circle", + symbolSize: 8, + label: { + normal: { + show: true, + formatter: function (dataObj) { + const { dataIndex, value } = dataObj; + let labelText = value; + + labelText = ""; + if (dataIndex % 1 === 0) { + // 每隔三个x坐标显示一个 + labelText = value; + } + + return `${labelText}`; + }, + }, + }, + itemStyle: { + color: "#fff", + shadowColor: "#fff", + shadowBlur: 10, + }, + lineStyle: { + color: "#FFCC8A", + width: 1, + }, + }, + ], + // legend: { + // data: ['卸油事件'], + // textStyle: { + // color: '#fff' + // }, + // right: 28, + // top: 18, + // itemWidth: 8, + // itemHeight: 8, + // }, + grid: { + left: "40px", + right: "30px", + bottom: "38px", + top: "36px", + }, + }; + + userdata; + ngOnInit(): void { + this.userdata = JSON.parse(sessionStorage.getItem("userdata")); + + // 饼图 + this.warningechartpieAll = echarts.init( + document.getElementById("eventechartpieAll"), + null, + { devicePixelRatio: 2 } + ); + // this.equipmentechart = echarts.init(document.getElementById('equipmentechart')); + // 预警饼图 + this.warningechartpie = echarts.init( + document.getElementById("eventechartpie"), + null, + { devicePixelRatio: 2 } + ); + this.warningechartpie.on("legendselectchanged", (obj) => { + let arr = []; + for (const key in obj.selected) { + if (Object.prototype.hasOwnProperty.call(obj.selected, key)) { + const element = obj.selected[key]; + element ? arr.push(key) : null; + } + } + this.get30daysViolate(true, arr); + }); + // 预警线图 + this.warningechartbar = echarts.init( + document.getElementById("eventechartline") + ); + + // 卸油饼图 + this.oilchartpie = echarts.init( + document.getElementById("oilechartpie"), + null, + { devicePixelRatio: 2 } + ); + this.oilchartpie.on("legendselectchanged", (obj) => { + let arr = []; + for (const key in obj.selected) { + if (Object.prototype.hasOwnProperty.call(obj.selected, key)) { + const element = obj.selected[key]; + element ? arr.push(key) : null; + } + } + this.get30daysViolate(false, arr); + }); + // 卸油线图 + this.oilchartbar = echarts.init(document.getElementById("oilechartline")); + + window.onresize = () => { + setTimeout(() => { + this.warningechartpieAll.resize(); + this.warningechartpie.resize(); + this.warningechartbar.resize(); + this.oilchartpie.resize(); + this.oilchartbar.resize(); + }, 200); + }; + + this.rollStart(); + + this.getHomeAggregation(); + + this.getUnreadNotification(); + + setTimeout(() => { + this.getHomeAggregation(); + }, 10 * 6000); + + this.listRefreshService.getMessage().subscribe((message: any) => { + //列表刷新 + if (message.type == "add") { + this.getHomeAggregation(); + } + }); + + // this.resolutionRatio(); + } + + ngOnDestroy(): void { + this.warningechartpieAll.dispose(); + this.warningechartpie.dispose(); + this.warningechartbar.dispose(); + this.oilchartpie.dispose(); + this.oilchartbar.dispose(); + + this.mouseEnter(); + } + + resolutionRatio() { + console.log(document.documentElement.clientWidth); + console.log(document.documentElement.clientHeight); + } + + unreadMessageList: any; + /** + * 获得所有未读消息 + */ + getUnreadNotification() { + this.http + .get("/api/services/app/Notification/GetUnreadNotification") + .subscribe((data: any) => { + console.log("获得所有未读消息", data); + this.unreadMessageList = data.result; + }); + } + + //获得统计信息 + + HomeAggregatioData: any = { + areaAgg: [], + violationType: { + violationTypeAgg: [], + }, + ouViolationType: { + ouCorrectCount: "", + ouNotCorrectCount: "", + ouTotalCount: "", + }, + dev: { + stationCount: "", + violationCount: "", + cameraCount: "", + }, + deviceViolationCount: "", + licenseViolationCount: "", + }; + totalCount; + isSpin: boolean = false; + + /** + * 获得统计图表数据 + */ + + organizationUnitId; + getHomeAggregation() { + if (this.router.url.indexOf("petrolStation") != -1) { + this.organizationUnitId = JSON.parse( + sessionStorage.getItem("userdataOfgasstation") + ).organization.id; + } else { + this.organizationUnitId = JSON.parse( + sessionStorage.getItem("userdata") + ).organization.id; + } + let body = { + organizationUnitId: this.organizationUnitId, + isContainsChildren: true, + }; + this.isSpin = true; + this.http + .post("/api/services/app/Home/HomeAggregation", body) + .subscribe((data: any) => { + console.log("data.result", data.result); + data.result.violationNameAgg = data.result.violationNameAgg.filter( + (v, i) => i < 5 + ); + data.result.stationAgg = data.result.stationAgg.filter((v, i) => i < 5); + this.HomeAggregatioData = data.result; + this.totalCount = data.result.todayRecordCount; + this.equipmentechartdata = [ + { name: "接入油站数量", value: data.result.dev.stationCount }, + { name: "摄像头数量", value: data.result.dev.cameraCount }, + { name: "预警模型数量", value: data.result.dev.violationCount }, + ]; + console.log("图表信息", data.result); + //左上角累计预警事件 + 左下角饼图 + 右下角饼图 + this.eventEcharts(data.result); + this.isSpin = false; + + //左下角柱状图； + let arr1 = []; + arr1 = this.HomeAggregatioData.violationType.violationTypeAgg.map( + (v) => v.name + ); + this.get30daysViolate(true, arr1); + //右下角柱状图 + let arr2 = []; + arr2 = this.HomeAggregatioData.ouViolationType.ouViolationTypeAgg.map( + (v) => v.name + ); + this.get30daysViolate(false, arr2); + }); + } + + //预警图表 + equipmentechartdata; + tools1; + tools1All; + tools2; + oilDischargeNum: any; + eventEcharts(data) { + //累计预警 和 30天预警的饼图 + let violationTypeAggCount = 0; + let violationTypeAggCountAll = 0; + data.violationType.violationTypeAgg.forEach((element) => { + violationTypeAggCount += element.count; + element.name = element.key; + element.value = element.count; + }); + data.violationType.violationTypeAggAll.forEach((element) => { + violationTypeAggCountAll += element.count; + element.name = element.key; + element.value = element.count; + }); + this.warningechartpieOption.series[0].data = + data.violationType.violationTypeAgg; + // this.warningechartpieOption.series[0].label.normal.formatter = + // "{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|预警事件}"; + this.warningechartpie.setOption(this.warningechartpieOption); + + this.warningechartpieOptionAll.series[0].data = + data.violationType.violationTypeAggAll; + this.warningechartpieOptionAll.series[0].label.normal.formatter = + "{total|" + data.recordCount + "}" + "\n\r" + "{active|累计预警}"; + this.warningechartpieAll.setOption(this.warningechartpieOptionAll); + + // 可调用clearLoop方法，清除定时器 + // this.tools1 && this.tools1.clearLoop(); + // this.tools1 = null; + // this.tools1 = tools.loopShowTooltip( + // this.warningechartpie, + // this.warningechartpieOption, + // { + // interval: 5000, + // loopSeries: true, + // } + // ); + + // this.tools1All && this.tools1All.clearLoop(); + // this.tools1All = null; + // this.tools1All = tools.loopShowTooltip( + // this.warningechartpieAll, + // this.warningechartpieOptionAll, + // { + // interval: 5000, + // loopSeries: true, + // } + // ); + + //卸油饼图 + this.oilDischargeNum = data.totalCount; + data.ouViolationType.ouViolationTypeAgg.forEach((element) => { + element.name = element.key; + element.value = element.count; + }); + this.oilchartpieOptionPieData1 = data.ouViolationType.ouViolationTypeAgg; + + this.oilchartpieOption.series[0].data = this.oilchartpieOptionPieData1; + this.oilchartpie.setOption(this.oilchartpieOption); + + // 可调用clearLoop方法，清除定时器 + // this.tools2 && this.tools2.clearLoop(); + // this.tools2 = null; + // this.tools2 = tools.loopShowTooltip( + // this.oilchartpie, + // this.oilchartpieOption, + // { + // interval: 5000, + // loopSeries: true, + // } + // ); + + } + + //下面两个柱状图 + + isSpinOfEventWarning = true; + isSpinOfOilDischarge = true; + get30daysViolate(type, data) { + //type = true 代表预警 false代表卸油 + type + ? (this.isSpinOfEventWarning = true) + : (this.isSpinOfOilDischarge = true); + let params = { + // OrganizationUnitId: this.organizationUnitId, + IsContainsChildren: true, + ViolationTypes: type ? data : null, + EventSystemNames: type ? null : data, + }; + this.http + .get("/api/services/app/Home/Get30daysViolate", { + params: params, + }) + .subscribe((data: any) => { + if (type) { + //30天预警柱状图填充数据 + // console.log("30天预警数据", data); + this.isSpinOfEventWarning = false; + this.eventWarningOfMonth(data.result); + } else { + //30天卸油数据柱状图填充数据 + // console.log("30天卸油数据", data); + this.isSpinOfOilDischarge = false; + this.oilDischargeEcharts(data.result); + } + }); + } + + //预警事件30天柱状图 + eventWarningOfMonth(data) { + let violationTypeAggCount = 0; + let monthArr = []; + let valuedata = []; + + data.forEach((element) => { + violationTypeAggCount += element.count; + monthArr.push(moment(element.key).format("MM.DD")); + valuedata.push(element.count); + }); + this.warningechartbarOption.xAxis.data = monthArr; + this.warningechartbarOption.series[0].data = valuedata; + this.warningechartbarOption.series[1].data = valuedata; + let valueCount = valuedata.find(function (value, index, arr) { + return value > 1000; + }); + if (valueCount) { + this.warningechartbarOption.series[1].label.normal.formatter = function ( + dataObj + ) { + const { dataIndex, value } = dataObj; + let labelText = value; + labelText = ""; + if (dataIndex % 2 === 0) { + // 每隔三个x坐标显示一个 + labelText = value; + } + return `${labelText}`; + }; + } + this.warningechartbar.setOption(this.warningechartbarOption); + this.warningechartpieOption.series[0].label.normal.formatter = + "{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|预警事件}"; + this.warningechartpie.setOption(this.warningechartpieOption); + } + + //卸油30天柱状图 + oilDischargeEcharts(data) { + let violationTypeAggCount = 0; + //柱状图 + let monthArr = []; + let valuedata = []; + data.forEach((element) => { + violationTypeAggCount += element.count; + monthArr.push(moment(element.key).format("MM.DD")); + valuedata.push(element.count); + }); + this.oilchartbarOption.xAxis.data = monthArr; + this.oilchartbarOption.series[0].data = valuedata; + this.oilchartbarOption.series[1].data = valuedata; + let valueCount = valuedata.find(function (value, index, arr) { + return value > 1000; + }); + if (valueCount) { + this.warningechartbarOption.series[1].label.normal.formatter = function ( + dataObj + ) { + const { dataIndex, value } = dataObj; + let labelText = value; + + labelText = ""; + if (dataIndex % 2 === 0) { + // 每隔三个x坐标显示一个 + labelText = value; + } + + return `${labelText}`; + }; + } + this.oilchartbar.setOption(this.oilchartbarOption); + + this.oilchartpieOption.series[0].label.normal.formatter = + "{total|" + violationTypeAggCount + "}" + "\n\r" + "{active|卸油预警}"; + this.oilchartpie.setOption(this.oilchartpieOption); + } + + timer; + /** + * 上部通知栏滚动 + */ + rollStart() { + var ROLL_SPEED = 100; + var noticeList1 = document.getElementById("notice-list"); + var noticeList2 = document.getElementById("notice-list-2"); + var listWrapper = document.getElementById("list-wrapper"); + noticeList2.innerHTML = noticeList1.innerHTML; + this.timer = setInterval(rollStart, ROLL_SPEED); + + function rollStart() { + if ( + Math.abs(_subStr(listWrapper.style.top)) >= noticeList1.clientHeight + ) { + listWrapper.style.top = "0px"; + } else { + var top = listWrapper.style.top; + listWrapper.style.top = _subStr(top) - 1 + "px"; + } + } + // 截取px前数值 + function _subStr(str) { + var index = str.indexOf("px"); + if (index > -1) { + return parseFloat(str.substr(0, index + 1)); + } + } + } + mouseEnter() { + // console.log('进入了') + window.clearInterval(this.timer); + } + mouseleave() { + // console.log('离开了') + if (!this.isOpenModel) { + this.rollStart(); + } + } + + width(width: string, denominator: string) { + let style: any = {}; + style.width = ((Number(width) / Number(denominator)) * 100).toFixed() + "%"; + return style; + } + + isOpenModel: boolean = false; + + look(item) { + console.log("消息item", item); + item.notification.data.violation = {}; + item.notification.data.violation.violationType = + item.notification.data.violationType; + item.notification.data.violation.violationSubType = + item.notification.data.violationSubType; + item.notification.data.violation.violationName = + item.notification.data.violationName; + item.notification.data.violation.eventSystemName = + item.notification.data.eventSystemName; + if ( + item.notification.data.eventSystemName == "设备报废临期提醒" || + item.notification.data.eventSystemName == "设备报废逾期报警" || + item.notification.data.eventSystemName == "设备维保临期提醒" || + item.notification.data.eventSystemName == "设备维保逾期报警" + ) { + this.isOpenModel = true; + let copydata = item.notification.data; + copydata.violatedItemSnapshotObj = JSON.parse( + copydata.violatedItemSnapshot + ); + const modal = this.modal.create({ + nzContent: DisposeequipmentComponent, + nzViewContainerRef: this.viewContainerRef, + nzWidth: 380, + nzBodyStyle: { + border: "1px solid #91CCFF", + "border-radius": "0px", + padding: "7px", + "box-shadow": "0 0 8px 0 #fff", + "background-image": "linear-gradient(#003665, #000f25)", + }, + nzComponentParams: { + data: copydata, + }, + nzFooter: null, + nzClosable: false, + nzOnOk: async () => { + if (instance.isScrap) { + await new Promise((resolve) => { + let body = { + id: copydata.violatedItemSnapshotObj.id, + isScrapped: true, + organizationUnitId: + copydata.violatedItemSnapshotObj.organizationUnitId, + name: instance.copydata2.violatedItemSnapshotObj.name, + storageLocation: + instance.copydata2.violatedItemSnapshotObj.storageLocation, + productionDate: moment( + instance.copydata2.violatedItemSnapshotObj.productionDate + ).format("yyyy-MM-DD"), + maintenanceDate: moment( + instance.copydata2.violatedItemSnapshotObj.maintenanceDate + ).format("yyyy-MM-DD"), + validityEndTime: moment( + instance.copydata2.violatedItemSnapshotObj.validityEndTime + ).format("yyyy-MM-DD"), + }; + this.http + .put("/api/services/app/FireEquipment/Update", body) + .subscribe((data: any) => { + let body = { + id: item.notification.entityId, + handleRecord: "报废成功!", + }; + this.http + .post( + "/api/services/app/ViolateRecord/HandleViolateRecord", + body + ) + .subscribe((data) => { + resolve(data); + this.message.create("success", "报废成功!"); + copydata.handleTime = new Date(); + return true; + }); + }); + }); + } else { + if (instance.validateForm.valid) { + await new Promise((resolve) => { + let body = { + id: copydata.violatedItemSnapshotObj.id, + name: instance.validateForm.value.name, + storageLocation: instance.validateForm.value.storageLocation, + productionDate: moment( + instance.validateForm.value.productionDate + ).format("yyyy-MM-DD"), + maintenanceDate: moment( + instance.validateForm.value.maintenanceDate + ).format("yyyy-MM-DD"), + validityEndTime: moment( + instance.validateForm.value.validityEndTime + ).format("yyyy-MM-DD"), + organizationUnitId: + copydata.violatedItemSnapshotObj.organizationUnitId, + }; + this.http + .put("/api/services/app/FireEquipment/Update", body) + .subscribe((data: any) => { + let body = { + id: item.notification.entityId, + handleRecord: "维保成功!", + }; + this.http + .post( + "/api/services/app/ViolateRecord/HandleViolateRecord", + body + ) + .subscribe((data) => { + resolve(data); + this.message.create("success", "维保成功!"); + copydata.handleTime = new Date(); + return true; + }); + }); + }); + } else { + this.message.create("warning", "请填写完整!"); + return false; + } + } + }, + }); + const instance = modal.getContentComponent(); + + modal.afterClose.subscribe((result) => { + this.isOpenModel = false; + this.rollStart(); + }); + this.readMess(item.notification.id); + } else { + this.isOpenModel = true; + item.notification.data.id = item.notification.entityId; + let data = item.notification.data; + const modal = this.modal.create({ + nzContent: GetOutOfLineDetailsComponent, + nzWrapClassName: "vertical-center-modal", + nzViewContainerRef: this.viewContainerRef, + nzWidth: + document.documentElement.clientHeight < 650 || + document.documentElement.clientWidth < 1400 + ? 1000 + : 1200, + nzClosable: false, + nzClassName: "modelnobg", + nzBodyStyle: { + "border-radius": "0px", + padding: "0px", + }, + nzComponentParams: { + data: data, + }, + nzFooter: null, + nzOnOk: async () => {}, + }); + const instance = modal.getContentComponent(); + modal.afterClose.subscribe((result) => { + this.isOpenModel = false; + this.rollStart(); + }); + this.readMess(item.notification.id); + } + } + + //标记为已读 + readMess(id) { + let body = { + id: id, + }; + this.http + .post("/api/services/app/Notification/Read", body) + .subscribe((data: any) => { + console.log("标记已读成功"); + }); + } + + ignore(index) { + this.unreadMessageList.splice(index, 1); + } +} diff --git a/src/app/pages/home/home.component.html b/src/app/pages/home/home.component.html index 4b7f380..1162930 100644 --- a/src/app/pages/home/home.component.html +++ b/src/app/pages/home/home.component.html @@ -26,17 +26,6 @@
- - diff --git a/src/app/pages/home/home.component.scss b/src/app/pages/home/home.component.scss index b0b901e..ea49998 100644 --- a/src/app/pages/home/home.component.scss +++ b/src/app/pages/home/home.component.scss @@ -1,10 +1,10 @@ .blue { - color: #36A2FF; + color: #36a2ff; cursor: pointer; } .grey { - color: #FFFFFF; + color: #ffffff; opacity: 0.6; } @@ -13,39 +13,41 @@ height: 100%; overflow: hidden; // 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; flex-direction: column; } - - .menu { height: 56px; width: 100%; display: flex; justify-content: center; font-size: 17px; - background: url('../../../assets/images/navbg.png') no-repeat; + background: url("../../../assets/images/navbg.png") no-repeat; background-size: 100% 115%; position: relative; .libox { - width: 33%; + width: 35%; display: flex; - + justify-content: center; li { - flex: 1; + // flex: 1; + box-sizing: border-box; + padding: 0 20px; height: 52px; line-height: 52px; text-align: center; cursor: pointer; font-family: sybold; - color: #EBFAFF; + color: #ebfaff; } } - - } .boxleft { @@ -67,7 +69,7 @@ span { font-size: 16px; - color: #FFFFFF; + color: #ffffff; opacity: 0.6; } @@ -77,7 +79,6 @@ } } - .backbtn { position: absolute; left: 205px; @@ -87,9 +88,9 @@ width: 64px; height: 32px; background: rgba(0, 129, 255, 0.3); - border: 1px solid #36A2FF; + border: 1px solid #36a2ff; border-radius: 0px; - color: #91CCFF; + color: #91ccff; } } @@ -115,7 +116,7 @@ .today { font-size: 19px; font-family: titlefont; - color: #D0EAFF; + color: #d0eaff; margin-top: 11px; margin-left: 10px; } @@ -124,13 +125,17 @@ .content { flex: 1; overflow: hidden; - } .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%, #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% @@ -140,8 +145,6 @@ font-size: 14px; .libox { - width: 33%; - li { height: 42px; line-height: 42px; @@ -190,13 +193,11 @@ // 适配150% @media screen and (max-height: 600px) { - .menu { height: 32px; font-size: 8px; .libox { - width: 33%; li { height: 32px; @@ -229,7 +230,6 @@ } } - .backbtn { left: 156px; bottom: 0px; @@ -243,6 +243,4 @@ padding: 0; } } - - } diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 659a3ea..581ac05 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -71,6 +71,7 @@ export class HomeComponent implements OnInit { //菜单 menu1 = [ + { name: "AI视频预警统计", url: "/comprehensive" }, { name: "首页", url: "/homepage" }, { name: "数字油站", url: "/plan" }, { name: "今日预警", url: "/todaywarning" }, diff --git a/src/app/pages/login/login.component.html b/src/app/pages/login/login.component.html index e2a37ae..c84aa01 100644 --- a/src/app/pages/login/login.component.html +++ b/src/app/pages/login/login.component.html @@ -43,7 +43,7 @@
- +
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index a5b725b..a6de4f3 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -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 {} diff --git a/src/app/pages/pages.module.ts b/src/app/pages/pages.module.ts index 85ec4e1..483bc4e 100644 --- a/src/app/pages/pages.module.ts +++ b/src/app/pages/pages.module.ts @@ -95,10 +95,11 @@ import { DownImageComponent } from './down-image/down-image.component'; import { ImgLookComponent } from './audit/img-look/img-look.component'; import { AnxinImgLookComponent } from './oil-unloading-process/anxin-img-look/anxin-img-look.component'; import { SingleloginComponent } from './singlelogin/singlelogin.component'; +import { HomePageComprehensiveComponent } from './home-page-comprehensive/home-page-comprehensive.component'; @NgModule({ declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, 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: [