-
-
-
+
+ 39
+ 今日违规
+
+
+
+
+ Ⅰ级违法事件
+ Ⅱ级违法事件
+ Ⅲ级违法事件
+
+
+ 编号:{{item.num}}
+
+
+ 违规行为:{{item.content}}
+
+
+ 违规地点:{{item.site}}
+
+
+ 违规时间:{{item.time}}
+
+
+
+
+ Content one
+ Content two
+ Content three
+ Content three
+
+
+
+
diff --git a/src/app/pages/today-warning/today-warning.component.scss b/src/app/pages/today-warning/today-warning.component.scss
index 39419f5..48b526d 100644
--- a/src/app/pages/today-warning/today-warning.component.scss
+++ b/src/app/pages/today-warning/today-warning.component.scss
@@ -1,39 +1,121 @@
-.warningbox{
+.warningbox {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+
+ .title {
+ box-sizing: border-box;
+ padding: 0 20PX;
width: 100%;
- height: 100%;
- .title{
- width: 100%;
- height: 50px;
- line-height: 50px;
+ height: 50px;
+ line-height: 50px;
+ font-family: titlefont;
+ font-size: 26px;
+ color: #D0EAFF;
+ }
+
+ .search {
+ box-sizing: border-box;
+ padding: 0 36px;
+ width: 100%;
+ height: 32px;
+
+ // margin-bottom: 18px;
+ form {
+ width: 100%;
+ height: 32px;
+ display: flex;
+ justify-content: space-around;
+
+ .searchParams {
+ width: 22%;
+ }
+
+ .btn {
+ width: 5%;
+ }
+
+ nz-select {
+ color: #fff;
+ }
+
+ nz-date-picker {
+
+ background-color: #002552;
+ width: 145%;
+ }
+
}
- .search{
- box-sizing: border-box;
- padding: 0 36px;
- width: 100%;
- height: 32px;
- form{
- width: 100%;
- height: 32px;
- }
- .searchParams{
- width: 21.5%;
- }
- nz-date-picker{
- width: 145%;
- background-color: #002552;
- color: #8aacce;
- }
- button{
- width: 84px;
- }
- .submit{
- background-color: #013064;
- border: 1px solid #4c8ac8;
- color: #86bff3;
- }
- .reset{
- background-color: #010d26;
- border: 1px solid #4c8ac8;
+
+ .submit {
+ background-color: #013064;
+ border: 1px solid #4c8ac8;
+ color: #86bff3;
+ }
+
+ .reset {
+ background-color: #010d26;
+ border: 1px solid #4c8ac8;
+ color: #86bff3;
+ }
+ }
+
+ .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;
+ background-image: radial-gradient(#004987, #03447c, #02325c, #012341, #01122e);
+ box-sizing: border-box;
+ padding: 20px 47px 20px 39px;
+
+ .listitem {
+ width: 100%;
+ height: 75px;
+ line-height: 75px;
+ border: 1px solid #4c8ac8;
+ color: #86bff3;
+ margin-bottom: 12px;
+
+ div {
+ text-align: center;
+
+ button {
+ background-color: #013064;
+ border: 1px solid #4c8ac8;
+ color: #86bff3;
}
+ }
}
-}
\ No newline at end of file
+
+ }
+}
+
+::ng-deep .vertical-center-modal {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+::ng-deep .vertical-center-modal .ant-modal {
+ top: 0;
+}
diff --git a/src/app/pages/today-warning/today-warning.component.ts b/src/app/pages/today-warning/today-warning.component.ts
index a6f9579..c952347 100644
--- a/src/app/pages/today-warning/today-warning.component.ts
+++ b/src/app/pages/today-warning/today-warning.component.ts
@@ -23,7 +23,43 @@ export class TodayWarningComponent implements OnInit {
this.validateForm.controls[i].markAsDirty();
this.validateForm.controls[i].updateValueAndValidity();
}
-
+
console.log(this.validateForm)
}
+ resetForm(e: MouseEvent): void {
+ e.preventDefault();
+ this.validateForm.reset();
+ for (const key in this.validateForm.controls) {
+ this.validateForm.controls[key].markAsPristine();
+ this.validateForm.controls[key].updateValueAndValidity();
+ }
+ }
+
+ list: any = [
+ {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:2,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:3,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'},
+ {level:1,num:'DFHDUF54545SDS5D45SD4',content:'工作人员倚靠加油机或者立柱',site:'加油区2号摄像头',time:'2021-10-12 09:28:13'}
+ ]
+
+ isVisible = false;
+ showModal(): void {
+ this.isVisible = true;
+ }
+ handleOk(): void {
+ console.log('Button ok clicked!');
+ this.isVisible = false;
+ }
+ handleCancel(): void {
+ console.log('Button cancel clicked!');
+ this.isVisible = false;
+ }
}
diff --git a/src/assets/font-family/sybold.OTF b/src/assets/font-family/sybold.OTF
new file mode 100644
index 0000000..4b3429a
Binary files /dev/null and b/src/assets/font-family/sybold.OTF differ
diff --git a/src/assets/font-family/synormal.OTF b/src/assets/font-family/synormal.OTF
new file mode 100644
index 0000000..091f56d
Binary files /dev/null and b/src/assets/font-family/synormal.OTF differ
diff --git a/src/assets/font-family/titlefont.TTF b/src/assets/font-family/titlefont.TTF
new file mode 100644
index 0000000..3729151
Binary files /dev/null and b/src/assets/font-family/titlefont.TTF differ
diff --git a/src/index.html b/src/index.html
index 1bb7efe..f451d0c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -6,7 +6,6 @@