Browse Source

[完善]完善今日预警页面,处置页面,首页ui

dev
邵佳豪 3 years ago
parent
commit
9d33d0f89e
  1. 1
      src/app/pages/criminal-records-admin/criminal-records-admin.component.html
  2. 7
      src/app/pages/criminal-records-admin/criminal-records-admin.component.ts
  3. 3
      src/app/pages/criminal-records/criminal-records.component.html
  4. 7
      src/app/pages/criminal-records/criminal-records.component.ts
  5. 36
      src/app/pages/home-page/home-page.component.html
  6. 32
      src/app/pages/home-page/home-page.component.scss
  7. 45
      src/app/pages/home-page/home-page.component.ts
  8. 10
      src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts
  9. 3
      src/app/pages/plan-admin/plan-admin.component.ts
  10. 24
      src/app/pages/today-warning-admin/today-warning-admin.component.html
  11. 18
      src/app/pages/today-warning-admin/today-warning-admin.component.scss
  12. 12
      src/app/pages/today-warning-admin/today-warning-admin.component.ts
  13. 16
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html
  14. 7
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss
  15. 1
      src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts
  16. 15
      src/app/pages/today-warning/today-warning.component.html
  17. 8
      src/app/pages/today-warning/today-warning.component.scss
  18. 8
      src/app/pages/today-warning/today-warning.component.ts

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

@ -228,6 +228,7 @@
<span *ngIf="item.handleTime" style="color: rgba(145, 204, 255, 0.24);;">处置</span> -->
</div>
</div>
<!-- <nz-spin style="text-align: center;margin-top: 12px;" nzSimple *ngIf="isSpin"></nz-spin> -->
</div>
</div>
<!-- <div class="pagination">

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

@ -108,7 +108,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
}
},
tooltip: {
trigger: 'axis'
// trigger: 'axis'
},
series: [
{
@ -163,7 +163,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
show: false
},
tooltip: {
trigger: 'axis'
// trigger: 'axis'
},
yAxis: {
type: 'category',
@ -434,6 +434,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
MaxResultCount: string = '50'
list: any = []
totalCount: string
isSpin: boolean = false
getViolateRecordList() {
let ViolationIds = []
if (this.validateForm.value.event) {
@ -463,6 +464,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
SkipCount: this.SkipCount,
MaxResultCount: this.MaxResultCount
}
this.isSpin = true
this.http.get('/api/services/app/ViolateRecord/GetAll', {
params: params
}).subscribe((data: any) => {
@ -471,6 +473,7 @@ export class CriminalRecordsAdminComponent implements OnInit {
// this.list = data.result.items
this.totalCount = data.result.totalCount
console.log('违规记录列表', data)
this.isSpin = false
this.getAggregations()
console.log(this.list.length)
})

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

@ -175,7 +175,7 @@
{{item.violation.eventSystemName}}
</div>
<div nz-col nzSpan="3">
{{item.violation.violationName}}
{{item.gasStation.locationName}}
</div>
<div nz-col nzSpan="3">
{{item.violateArea}}
@ -196,6 +196,7 @@
<span *ngIf="item.handleTime" style="color: rgba(145, 204, 255, 0.24);;">处置</span> -->
</div>
</div>
<!-- <nz-spin style="text-align: center;margin-top: 12px;" nzSimple *ngIf="isSpin"></nz-spin> -->
</div>
</div>
<!-- <div class="pagination">

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

@ -104,7 +104,7 @@ export class CriminalRecordsComponent implements OnInit {
}
},
tooltip: {
trigger: 'axis'
// trigger: 'axis'
},
series: [
{
@ -159,7 +159,7 @@ export class CriminalRecordsComponent implements OnInit {
show: false
},
tooltip: {
trigger: 'axis'
// trigger: 'axis'
},
yAxis: {
type: 'category',
@ -414,6 +414,7 @@ export class CriminalRecordsComponent implements OnInit {
MaxResultCount: string = '50'
list: any = []
totalCount: string
isSpin: boolean = false
getViolateRecordList() {
let ViolationIds = []
if (this.validateForm.value.event) {
@ -443,6 +444,7 @@ export class CriminalRecordsComponent implements OnInit {
SkipCount: this.SkipCount,
MaxResultCount: this.MaxResultCount
}
this.isSpin = true
this.http.get('/api/services/app/ViolateRecord/GetAll', {
params: params
}).subscribe((data: any) => {
@ -451,6 +453,7 @@ export class CriminalRecordsComponent implements OnInit {
// this.list = data.result.items
this.totalCount = data.result.totalCount
console.log('违规记录列表', data)
this.isSpin = false
this.getAggregations()
})
}

36
src/app/pages/home-page/home-page.component.html

@ -65,7 +65,8 @@
</span>
</div>
<div class="progress">
<div class="colorbar" [ngStyle]="width(item.count,HomeAggregatioData.compayAgg[0].count)"
<div class="colorbar"
[ngStyle]="width(item.count,HomeAggregatioData.compayAgg[0].count)"
[ngClass]="{'red': key < 2,'yellow': key > 1 && key <4,'blue': key > 3 && key <10 }">
</div>
</div>
@ -113,8 +114,7 @@
<div class="leftitem">
<span class="itemname">油站排名</span>
<div class="box eventbox">
<div class="eventboxitem"
*ngFor="let item of HomeAggregatioData.stationAgg;let key = index">
<div class="eventboxitem" *ngFor="let item of HomeAggregatioData.stationAgg;let key = index">
<div class="eventname" [title]="item.name + item.companyName">
<div class="block" [ngClass]="{'yellow': key < 3,'blue': key > 2}">
<ng-container *ngIf="key != 9; else elseTemplate">
@ -124,7 +124,7 @@
{{key + 1}}
</ng-template>
</div>
{{item.name}} {{item.companyName}}
{{item.name}} {{item.companyName}}
</div>
<div class="progressbox">
<div class="progress">
@ -243,20 +243,30 @@
<div class="oilNum">
<div class="oilNumItem">
<div class="point"></div>
<span>卸油正常</span>
{{HomeAggregatioData.ouViolationType.ouCorrectCount}}
<div class="pointbox">
<div class="point"></div>
<span>累计卸油总车次</span>
</div>
{{HomeAggregatioData.ouViolationType.ouTotalCount}}
</div>
<div class="oilNumItem">
<div class="point"></div>
<span>卸油违规</span>
{{HomeAggregatioData.ouViolationType.ouNotCorrectCount}}
<div class="pointbox">
<div class="point"></div>
<span>累计卸油正常车次</span>
</div>
{{HomeAggregatioData.ouViolationType.ouCorrectCount}}
</div>
<div class="oilNumItem">
<div class="point"></div>
<span>卸油总数</span>
{{HomeAggregatioData.ouViolationType.ouTotalCount}}
<div class="pointbox">
<div class="point"></div>
<span>累计卸油预警车次</span>
</div>
{{HomeAggregatioData.ouViolationType.ouNotCorrectCount}}
</div>
</div>
</div>
</div>

32
src/app/pages/home-page/home-page.component.scss

@ -569,29 +569,33 @@
width: 76%;
// border: 1px solid red;
}
.oilNum{
.oilNum {
position: absolute;
left: 1%;
bottom: 20px;
left: 6%;
bottom: 15px;
display: flex;
flex-wrap: wrap;
.oilNumItem{
margin-right: 6px;
}
div{
flex-direction: column;
.oilNumItem {
display: flex;
align-items: center;
justify-content: space-between;
color: white;
font-size: 12px;
span{
margin:0 4px;
span {
margin: 0 4px;
}
.point{
.pointbox{
display: flex;
align-items: center;
}
.point {
width: 6px;
height: 6px;
background-color: #91CCFF;
}
}
}
@ -648,7 +652,7 @@
// 适配125%
@media screen and (max-height: 750px) {
@media screen and (max-height: 900px) {
.informbox {
width: 100%;
height: 38px;

45
src/app/pages/home-page/home-page.component.ts

@ -128,45 +128,8 @@ export class HomePageComponent implements OnInit {
}
},
tooltip: {
trigger: 'axis'//触发类型
// trigger: 'axis'//触发类型
},
// series: [
// {
// data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 16, 15, 14, 13, 12, 11, 10, 8, 7, 6, 3, 2, 1],
// type: 'line',
// smooth: true,
// showSymbol: false,
// label: {
// show: true,
// position: 'top'
// },
// lineStyle: {
// color: '#46DFFF',
// width: 1
// },
// areaStyle: {
// opacity: 0.8,
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0, color: '#46DFFF' // 0% 处的颜色
// },
// {
// offset: 0.3, color: '#46DFFF' // 0% 处的颜色
// },
// {
// offset: 1, color: 'rgba(0, 13, 33, 0)' // 100% 处的颜色
// }],
// global: false // 缺省为 false
// }
// },
// }
// ],
series: [
{
data: [],
@ -242,7 +205,7 @@ export class HomePageComponent implements OnInit {
{
type: 'pie',
radius: ['50%', '60%'],
bottom: '-5%',
bottom: '8%',
right: '77%',
avoidLabelOverlap: false,//防止标签重叠策略
label: {
@ -298,7 +261,7 @@ export class HomePageComponent implements OnInit {
axisTick: {//刻度线
show: false
},
inverse: true
// inverse: true
},
yAxis: {
@ -323,7 +286,7 @@ export class HomePageComponent implements OnInit {
}
},
tooltip: {
trigger: 'axis'
// // trigger: 'axis'
},
series: [
{

10
src/app/pages/oil-unloading-process-list/oil-unloading-process-list.component.ts

@ -193,7 +193,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
}
},
tooltip: {
trigger: 'axis'
// trigger: 'axis'
},
series: [
{
@ -313,7 +313,7 @@ export class OilUnloadingProcessListComponent implements OnInit {
//二级柱状图
oilchartbarOption2 = {
tooltip: {
trigger: 'axis'
// trigger: 'axis'
},
xAxis: {
type: 'category',
@ -452,6 +452,12 @@ export class OilUnloadingProcessListComponent implements OnInit {
this.refreshEchartsData2(this.echartsData)
}
});
this.myChart.on('click', (params) => {
if (params.name == '预警事件') {
this.isgoback = true
this.refreshEchartsData2(this.echartsData)
}
});
//柱状图
let monthArr = []

3
src/app/pages/plan-admin/plan-admin.component.ts

@ -171,7 +171,8 @@ export class PlanAdminComponent implements OnInit {
OrganizationUnitId: String(this.OrganizationUnitId),
IsContainsChildren: 'true',
SkipCount: this.SkipCount,
MaxResultCount: this.MaxResultCount
MaxResultCount: this.MaxResultCount,
// Sorting:'hasBuildingInfo'
}
await new Promise((resolve, reject) => {
this.http.get('/api/services/app/GasStation/GetAll', {

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

@ -93,16 +93,17 @@
</nz-form-item>
</form>
</div>
<div class="listbox">
<div class="listbox" style="text-align: center;">
<div nz-row class="listitem listitemhead">
<div nz-col nzSpan="2" style="box-sizing: border-box;padding-left: 10px;">
<div nz-col nzSpan="2" style="box-sizing: border-box;padding-left: 30px;">
预警级别
</div>
<div nz-col nzSpan="2">
预警类型
</div>
<div nz-col nzSpan="4">
预警信息
<div nz-col nzSpan="3">
预警事件
</div>
<div nz-col nzSpan="2">
所属公司
@ -125,12 +126,13 @@
<div nz-col nzSpan="2">
处置状态
</div>
<div nz-col nzSpan="1">
<div nz-col nzSpan="2">
操作
</div>
</div>
<div nz-row class="listitem" *ngFor="let item of list">
<div nz-col nzSpan="2">
<div nz-col nzSpan="2" class="imgbox">
<span *ngIf="item.violation.violationType == '卸油作业检查'">
<img src="../../../assets/images/warning2.png">
</span>
@ -160,8 +162,8 @@
<div nz-col nzSpan="2">
{{item.violation.violationType}}
</div>
<div nz-col nzSpan="4">
{{item.violation.violationName}}
<div nz-col nzSpan="3">
{{item.violation.eventSystemName}}
</div>
<div nz-col nzSpan="2">
{{item.gasStation.companyName}}
@ -189,11 +191,11 @@
<span style="color: #23D9FF;">已处置</span>
</ng-template>
</div>
<div nz-col nzSpan="1">
<button nz-button (click)="look(item)" style="margin-right: 16px;">查看</button>
<!-- <button *ngIf="!item.handleTime" nz-button (click)="dispose(item)">处置</button> -->
<div nz-col nzSpan="2" style="min-width: 64px;">
<button nz-button (click)="look(item)">查看</button>
</div>
</div>
<nz-spin nzSimple *ngIf="isSpin"></nz-spin>
</div>
</div>

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

@ -102,17 +102,14 @@
margin-bottom: 12px;
background: linear-gradient(180deg, rgba(3, 0, 0, 0) 0%, rgba(0, 46, 91, 0.68) 100%);
box-sizing: border-box;
padding-left: 20px;
padding-right: 60px;
white-space: nowrap;
div {
font-size: 15px;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
align-items: center;
button {
font-size: 15px;
@ -121,7 +118,15 @@
color: #91CCFF;
}
}
.imgbox{
span{
img{
width: 30%;
height: 30%;
margin-left: 15px;
}
}
}
.propsm {
display: inline-block;
width: 38px;
@ -208,7 +213,6 @@
overflow-y: auto;
box-sizing: border-box;
padding: 16px 35px 16px 36px;
.listitem {
height: 40px;
line-height: 40px;

12
src/app/pages/today-warning-admin/today-warning-admin.component.ts

@ -25,7 +25,7 @@ export class TodayWarningAdminComponent implements OnInit {
validateForm!: FormGroup;
constructor(private http: HttpClient, private fb: FormBuilder, private router: Router, private toTree: TreeService, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private navChangeService: NavChangeService, private message: NzMessageService) { }
isSpin:boolean = false
ngOnInit(): void {
this.validateForm = this.fb.group({
level: [null],
@ -112,13 +112,14 @@ export class TodayWarningAdminComponent implements OnInit {
disposalState = null
}
console.log(this.validateForm.value)
this.isSpin = true
let params = {
Level: this.validateForm.value.level,
ViolationIds: ViolationIds,
ViolateArea: this.validateForm.value.area,
organizationUnitId: this.validateForm.value.organization,
ViolateTime: (this.validateForm.value.datePickerEnd && this.validateForm.value.datePickerStart) ? [moment(this.validateForm.value.datePickerStart).format('yyyy-MM-DD HH:mm:ss'), moment(this.validateForm.value.datePickerEnd).format('yyyy-MM-DD HH:mm:ss')] : null,
// ViolateTime: ['2021-10-27', '2021-11-26'],
// ViolateTime: (this.validateForm.value.datePickerEnd && this.validateForm.value.datePickerStart) ? [moment(this.validateForm.value.datePickerStart).format('yyyy-MM-DD HH:mm:ss'), moment(this.validateForm.value.datePickerEnd).format('yyyy-MM-DD HH:mm:ss')] : null,
ViolateTime: ['2021-10-27', '2021-11-26'],
IsHandled: disposalState,
IsContainsChildren: 'true',
SkipCount: '0',
@ -130,7 +131,7 @@ export class TodayWarningAdminComponent implements OnInit {
this.list = data.result.items
this.totalCount = data.result.totalCount
console.log('预警列表', this.list)
this.isSpin = false
let obj = {
name: '改变数量',
num: this.totalCount
@ -171,6 +172,7 @@ export class TodayWarningAdminComponent implements OnInit {
isVisible = false
look(item) {
console.log(item)
const modal = this.modal.create({
nzContent: GetOutOfLineDetailsComponent,
nzWrapClassName: "vertical-center-modal",
@ -188,7 +190,7 @@ export class TodayWarningAdminComponent implements OnInit {
},
nzFooter: null,
nzOnOk: async () => {
console.log(99999,instance.content)
}
});
const instance = modal.getContentComponent();

16
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.html

@ -5,7 +5,7 @@
预警截图
<div class="border"></div>
</div>
<div *ngIf="data.violation.eventSystemName != '灭火器维护' && data.violation.eventSystemName != '证照预警'" (click)="contentType('video')" [ngClass]="{'selected': selectedType == 'video'}">
<div *ngIf="data.violation && data.violation.eventSystemName != '灭火器维护' && data.violation.eventSystemName != '证照预警'" (click)="contentType('video')" [ngClass]="{'selected': selectedType == 'video'}">
预警视频
<div class="border"></div>
</div>
@ -23,16 +23,24 @@
<div *ngIf="selectedType == 'video'" class="vediobox">
<video controls style="width: 100%;height: 100%;" [src]="vedioUrl"></video>
</div>
<div class="disposebox">
<div class="disposebox" *ngIf="!data.handleTime">
<div class="title">
<span>处置内容</span>
<span *ngIf="!data.handleTime" style="color: #36A2FF;cursor: pointer;" (click)="submit()">提交</span>
<span *ngIf="data.handleTime" style="color: #4BFFD4;cursor: default;">已处置</span>
<span style="color: #36A2FF;cursor: pointer;" (click)="submit()">提交</span>
</div>
<div class="textarea">
<textarea [(ngModel)]="content" style="width: 100%;height: 100%;" name="" id="" cols="30" rows="10"></textarea>
</div>
</div>
<div class="disposebox disposebox2" *ngIf="data.handleTime">
<div class="title">
<span>处置内容</span>
<span style="color: #4BFFD4;cursor: default;">已处置</span>
</div>
<div class="details">
{{content}}
</div>
</div>
</div>
</div>

7
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.scss

@ -93,10 +93,13 @@
}
}
.disposebox2{
height: 40px;
}
.imgbox {
flex: 1;
display: flex;
align-items: center;
width: 100%;
.imglist {
@ -147,6 +150,8 @@
.vediobox {
flex: 1;
width: 100%;
display: flex;
align-items: center;
video{
max-height: 500px;
}

1
src/app/pages/today-warning/get-out-of-line-details/get-out-of-line-details.component.ts

@ -38,6 +38,7 @@ export class GetOutOfLineDetailsComponent implements OnInit {
this.http.post('/api/services/app/ViolateRecord/HandleViolateRecord', body).subscribe(data => {
this.message.create('success', '处置成功!');
this.data.handleTime = new Date()
this.data.handleRecord = this.content
})
}
}

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

@ -76,9 +76,9 @@
</div>
<div class="listbox">
<div class="listbox" style="text-align: center;">
<div nz-row class="listitem" *ngFor="let item of list">
<div nz-col nzSpan="3">
<div nz-col nzSpan="3" class="imgbox">
<span *ngIf="item.violation.violationType == '卸油作业检查'">
<img src="../../../assets/images/warning2.png">
</span>
@ -109,7 +109,7 @@
预警类型: {{item.violation.violationType}}
</div>
<div nz-col nzSpan="4">
预警信息: {{item.violation.violationName}}
预警信息: {{item.violation.eventSystemName}}
</div>
<div nz-col nzSpan="4">
区域: {{item.violateArea}}
@ -117,7 +117,7 @@
<div nz-col nzSpan="3">
摄像头: {{item.cameraNo}}
</div>
<div nz-col nzSpan="4">
<div nz-col nzSpan="3">
{{item.violateTime | date:"yyyy-MM-dd HH:mm:ss"}}
</div>
<div nz-col nzSpan="2">
@ -128,11 +128,12 @@
<span style="color: #23D9FF;">已处置</span>
</ng-template>
</div>
<div nz-col nzSpan="1">
<div nz-col nzSpan="2">
<button nz-button (click)="look(item)" style="margin-right: 16px;">查看</button>
<button *ngIf="!item.handleTime" nz-button (click)="dispose(item)">处置</button>
<span *ngIf="item.handleTime" style="color: #23D9FF;margin-left: 10px;">已处置</span>
<!-- <button *ngIf="!item.handleTime" nz-button (click)="dispose(item)">处置</button>
<span *ngIf="item.handleTime" style="color: #23D9FF;margin-left: 10px;">已处置</span> -->
</div>
</div>
<nz-spin nzSimple *ngIf="isSpin"></nz-spin>
</div>
</div>

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

@ -113,6 +113,14 @@
color: #91CCFF;
}
}
.imgbox{
span{
img{
width: 30%;
height: 80%;
}
}
}
}
.dispositioned {

8
src/app/pages/today-warning/today-warning.component.ts

@ -54,6 +54,7 @@ export class TodayWarningComponent implements OnInit {
list: any = [
]
totalCount: string //预警总数
isSpin:boolean = false
getEarlyWarningList() {
let ViolationIds = []
if (this.validateForm.value.type) {
@ -74,20 +75,21 @@ export class TodayWarningComponent implements OnInit {
ViolationIds: ViolationIds,
ViolateArea: this.validateForm.value.area,
organizationUnitId: JSON.parse(sessionStorage.getItem('userdataOfgasstation')).organization.id,
ViolateTime: (this.validateForm.value.datePickerEnd && this.validateForm.value.datePickerStart) ? [moment(this.validateForm.value.datePickerStart).format('yyyy-MM-DD HH:mm:ss'), moment(this.validateForm.value.datePickerEnd).format('yyyy-MM-DD HH:mm:ss')] : null,
// ViolateTime: (this.validateForm.value.datePickerEnd && this.validateForm.value.datePickerStart) ? [moment(this.validateForm.value.datePickerStart).format('yyyy-MM-DD HH:mm:ss'), moment(this.validateForm.value.datePickerEnd).format('yyyy-MM-DD HH:mm:ss')] : null,
IsHandled: disposalState,
// ViolateTime: ['2021-10-27', '2021-11-26'],
ViolateTime: ['2021-10-27', '2021-11-26'],
IsContainsChildren: 'true',
SkipCount: '0',
MaxResultCount: '9999'
}
this.isSpin = true
this.http.get('/api/services/app/ViolateRecord/GetAll', {
params: params
}).subscribe((data: any) => {
this.list = data.result.items
this.totalCount = data.result.totalCount
console.log('预警列表', this.list)
this.isSpin = false
let obj = {
name: '改变数量',
num: this.totalCount

Loading…
Cancel
Save