[完善]完善ui框架

package-lock.json

@@ -4237,6 +4237,11 @@
       "resolved": "https://registry.npm.taobao.org/@types/cesium/download/@types/cesium-1.65.3.tgz",
       "integrity": "sha1-vG0xrx67i8IAIsKtXHqnDIaNp5I="
     },
+    "@types/earcut": {
+      "version": "2.1.1",
+      "resolved": "https://registry.nlark.com/@types/earcut/download/@types/earcut-2.1.1.tgz",
+      "integrity": "sha1-VzoK9gnxcAXHUfb0/+xJz+NY6lE="
+    },
     "@types/estree": {
       "version": "0.0.42",
       "resolved": "https://registry.npm.taobao.org/@types/estree/download/@types/estree-0.0.42.tgz",
@@ -7086,9 +7091,9 @@
       }
     },
     "earcut": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npm.taobao.org/earcut/download/earcut-2.2.2.tgz",
-      "integrity": "sha1-QbC8NfY+D+gNp83f8oUR5+LoDRE="
+      "version": "2.2.3",
+      "resolved": "https://registry.nlark.com/earcut/download/earcut-2.2.3.tgz",
+      "integrity": "sha1-1EztL/WhiFlWjjJ92cfUaxb1XPQ="
     },
     "ecc-jsbn": {
       "version": "0.1.2",

src/app/pages/pages.module.ts

@@ -1,49 +1,14 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { A11yModule } from '@angular/cdk/a11y';
+import { A11yModule  } from '@angular/cdk/a11y';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { PortalModule } from '@angular/cdk/portal';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { CdkStepperModule } from '@angular/cdk/stepper';
 import { CdkTableModule } from '@angular/cdk/table';
 import { CdkTreeModule } from '@angular/cdk/tree';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatBadgeModule } from '@angular/material/badge';
-import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
-import { MatCardModule, MatCardTitle } from '@angular/material/card';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatStepperModule } from '@angular/material/stepper';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatGridListModule } from '@angular/material/grid-list';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatListModule } from '@angular/material/list';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatSliderModule } from '@angular/material/slider';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/table';
-import { MatTabsModule } from '@angular/material/tabs';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatTreeModule } from '@angular/material/tree';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 import { HomeComponent } from './home/home.component';
@@ -62,18 +27,19 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzModalModule } from 'ng-zorro-antd/modal';
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,],
   imports: [
     PagesRoutingModule,
     CommonModule,
     A11yModule,
+    PortalModule,
+    ScrollingModule,
     CdkStepperModule,
     CdkTableModule,
     CdkTreeModule,
     DragDropModule,
-    // PortalModule,
-    // ScrollingModule,
     FormsModule,
     ReactiveFormsModule,
     RouterModule,
@@ -84,7 +50,8 @@ import { NzGridModule } from 'ng-zorro-antd/grid';
     NzSelectModule,
     NzDatePickerModule,
     NzIconModule,
-    NzGridModule
+    NzGridModule,
+    // NzModalModule
   ]
 })
 export class PagesModule { }

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

@@ -80,7 +80,13 @@
         违规时间:{{item.time}}
       </div>
       <div nz-col nzSpan="2">
-        <button nz-button>查看</button>
+        <button nz-button (click)="showModal()">查看</button>
+        <!-- <nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
+          <p>Content one</p>
+          <p>Content two</p>
+          <p>Content three</p>
+          <p>Content three</p>
+        </nz-modal> -->
       </div>
     </div>
   </div>

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

@@ -49,4 +49,17 @@ export class TodayWarningComponent implements OnInit {
     {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;
+  }
 }