Browse Source

[完善]根据原型图修改最新样式

dev
邵佳豪 3 years ago
parent
commit
e2eee64cb5
  1. 109
      src/app/pages/criminal-records-admin/criminal-records-admin.component.html
  2. 36
      src/app/pages/criminal-records-admin/criminal-records-admin.component.scss
  3. 13
      src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
  4. 109
      src/app/pages/criminal-records/criminal-records.component.html
  5. 33
      src/app/pages/criminal-records/criminal-records.component.scss
  6. 13
      src/app/pages/criminal-records/criminal-records.component.ts
  7. 38
      src/app/pages/home/home.component.html
  8. 41
      src/app/pages/home/home.component.scss
  9. 107
      src/app/pages/home/home.component.ts
  10. 5
      src/app/pages/today-warning-admin/today-warning-admin.component.html
  11. 51
      src/app/pages/today-warning-admin/today-warning-admin.component.scss
  12. 5
      src/app/pages/today-warning/today-warning.component.html
  13. 26
      src/app/pages/today-warning/today-warning.component.scss
  14. BIN
      src/assets/images/fullscreen.png
  15. BIN
      src/assets/images/navbg.png

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

@ -1,64 +1,65 @@
<div class="recordsboxadmin" id="recordsboxadmin">
<div class="search">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select id="level" formControlName="level" nzPlaceHolder="请选择预警级别">
<nz-option nzValue="1" nzLabel="一级"></nz-option>
<nz-option nzValue="2" nzLabel="二级"></nz-option>
<nz-option nzValue="3" nzLabel="三级"></nz-option>
<nz-option nzValue="4" nzLabel="四级"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select id="type" (ngModelChange)="typeChange($event)" formControlName="type" nzPlaceHolder="请选择预警类型">
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select id="site" formControlName="site" nzPlaceHolder="请选择站内发生区域">
<nz-option nzValue="出入口" nzLabel="出入口"></nz-option>
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
<nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-range-picker formControlName="datePicker"></nz-range-picker>
<br />
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
[nzType]="'sync'"></i>重置</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
<div class="content">
<div class="title">
<app-title [name]="'预警类型统计'"></app-title>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</div>
<div class="search" [hidden]="!isEcharts">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select id="level" formControlName="level" nzPlaceHolder="请选择预警级别">
<nz-option nzValue="1" nzLabel="一级"></nz-option>
<nz-option nzValue="2" nzLabel="二级"></nz-option>
<nz-option nzValue="3" nzLabel="三级"></nz-option>
<nz-option nzValue="4" nzLabel="四级"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select id="type" (ngModelChange)="typeChange($event)" formControlName="type" nzPlaceHolder="请选择预警类型">
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select id="site" formControlName="site" nzPlaceHolder="请选择站内发生区域">
<nz-option nzValue="出入口" nzLabel="出入口"></nz-option>
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
<nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-range-picker formControlName="datePicker"></nz-range-picker>
<br />
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
[nzType]="'sync'"></i>重置</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
<div class="chartsbox" [hidden]="!isEcharts">
<div class="chart">
<div class="leftbox">

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

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

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

@ -30,8 +30,9 @@ export class CriminalRecordsAdminComponent implements OnInit {
{
// name: 'Access From',
type: 'pie',
radius: [85, 112],//内半径外,外半径
left: '-30%',
radius: [88, 116],//内半径外,外半径
left: '0',
top:'8%',
avoidLabelOverlap: false,//防止标签重叠策略
label: {//每一个标签外网延伸的引导说明
show: false,
@ -142,10 +143,10 @@ export class CriminalRecordsAdminComponent implements OnInit {
}
],
grid: {
left: '36px',
left: '42px',
right: '30px',
bottom: '50px',
top: '45px'
bottom: '38px',
top: '60px'
}
};
baroption2 = {
@ -245,7 +246,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
left: '150px',
right: '80px',
bottom: '3px',
top: '20px'
top: '36px'
},
// dataZoom: [ //Y轴滑动条
// {

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

@ -1,64 +1,65 @@
<div class="recordsbox" id="recordsbox">
<div class="search">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select formControlName="level" nzPlaceHolder="请选择预警级别">
<nz-option nzValue="1" nzLabel="一级"></nz-option>
<nz-option nzValue="2" nzLabel="二级"></nz-option>
<nz-option nzValue="3" nzLabel="三级"></nz-option>
<nz-option nzValue="4" nzLabel="四级"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select formControlName="type" (ngModelChange)="typeChange($event)" nzPlaceHolder="请选择预警类型">
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select formControlName="site" nzPlaceHolder="请选择站内发生区域">
<nz-option nzValue="出入口" nzLabel="出入口"></nz-option>
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
<nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-range-picker formControlName="datePicker"></nz-range-picker>
<br />
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
[nzType]="'sync'"></i>重置</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
<div class="content">
<div class="title">
<app-title [name]="'预警类型统计'"></app-title>
<img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
</div>
<div class="search" [hidden]="!isEcharts">
<form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select formControlName="level" nzPlaceHolder="请选择预警级别">
<nz-option nzValue="1" nzLabel="一级"></nz-option>
<nz-option nzValue="2" nzLabel="二级"></nz-option>
<nz-option nzValue="3" nzLabel="三级"></nz-option>
<nz-option nzValue="4" nzLabel="四级"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select formControlName="type" (ngModelChange)="typeChange($event)" nzPlaceHolder="请选择预警类型">
<nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-select formControlName="site" nzPlaceHolder="请选择站内发生区域">
<nz-option nzValue="出入口" nzLabel="出入口"></nz-option>
<nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
<nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
<nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
<nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
<nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item class="searchParams">
<nz-form-control>
<nz-range-picker formControlName="datePicker"></nz-range-picker>
<br />
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
</nz-form-control>
</nz-form-item>
<nz-form-item class="btn">
<nz-form-control>
<button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
[nzType]="'sync'"></i>重置</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
<div class="chartsbox" [hidden]="!isEcharts">
<div class="chart">
<div class="leftbox">

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

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

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

@ -26,8 +26,9 @@ export class CriminalRecordsComponent implements OnInit {
{
// name: 'Access From',
type: 'pie',
radius: [85, 112],//内半径外,外半径
left: '-30%',
radius: [88, 116],//内半径外,外半径
left: '0',
top:'8%',
avoidLabelOverlap: false,//防止标签重叠策略
label: {//每一个标签外网延伸的引导说明
show: false,
@ -139,10 +140,10 @@ export class CriminalRecordsComponent implements OnInit {
}
],
grid: {
left: '36px',
left: '42px',
right: '30px',
bottom: '50px',
top: '45px'
bottom: '38px',
top: '60px'
}
};
baroption2 = {
@ -241,7 +242,7 @@ export class CriminalRecordsComponent implements OnInit {
left: '150px',
right: '80px',
bottom: '3px',
top: '20px'
top: '36px'
}
}
getThirtyDays() {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

BIN
src/assets/images/fullscreen.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/assets/images/navbg.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Loading…
Cancel
Save