Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/Sinopec-Anxin

3 years ago · 2bd30b89ba
15 changed files with 399 additions and 165 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -241,16 +241,16 @@
      "integrity": "sha1-jSuFLFJzvMFh0T+C+q81ZqtWKVE="
    },
    "@angular/cdk": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npm.taobao.org/@angular/cdk/download/@angular/cdk-9.0.0.tgz",
-      "integrity": "sha1-VzSBeulwRPkNME+g8lycGn+gv5Y=",
+      "version": "9.2.4",
+      "resolved": "https://registry.npmmirror.com/@angular/cdk/download/@angular/cdk-9.2.4.tgz",
+      "integrity": "sha1-hBOVi9J15MNL47lvVkRGcd0wupM=",
      "requires": {
        "parse5": "^5.0.0"
      },
      "dependencies": {
        "parse5": {
          "version": "5.1.1",
-          "resolved": "https://registry.npm.taobao.org/parse5/download/parse5-5.1.1.tgz?cache=0&sync_timestamp=1573036762880&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fparse5%2Fdownload%2Fparse5-5.1.1.tgz",
+          "resolved": "https://registry.nlark.com/parse5/download/parse5-5.1.1.tgz",
          "integrity": "sha1-9o5OW6GFKsLK3AD0VV//bCq7YXg=",
          "optional": true
        }
@ -2423,6 +2423,66 @@
        "to-fast-properties": "^2.0.0"
      }
    },
+    "@babylonjs/core": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/core/download/@babylonjs/core-4.2.0.tgz",
+      "integrity": "sha1-0c/UPX49LljN55CD8E7rYH9sjxg=",
+      "requires": {
+        "tslib": ">=1.10.0"
+      }
+    },
+    "@babylonjs/gui": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/gui/download/@babylonjs/gui-4.2.0.tgz",
+      "integrity": "sha1-wqNcpnJHWXMf4MTdv+JJAwGEf5M=",
+      "requires": {
+        "@babylonjs/core": "4.2.0",
+        "tslib": ">=1.10.0"
+      }
+    },
+    "@babylonjs/inspector": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/inspector/download/@babylonjs/inspector-4.2.0.tgz",
+      "integrity": "sha1-cNkBcpCX95sWbezM/I7SGV0rHDU=",
+      "requires": {
+        "@babylonjs/core": "4.2.0",
+        "@babylonjs/gui": "4.2.0",
+        "@babylonjs/loaders": "4.2.0",
+        "@babylonjs/materials": "4.2.0",
+        "@babylonjs/serializers": "4.2.0",
+        "babylonjs-gltf2interface": "4.2.0",
+        "tslib": ">=1.10.0"
+      }
+    },
+    "@babylonjs/loaders": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/loaders/download/@babylonjs/loaders-4.2.0.tgz",
+      "integrity": "sha1-qZAtwnfBbc0izRkH+GMQ4hHCR8s=",
+      "requires": {
+        "@babylonjs/core": "4.2.0",
+        "babylonjs-gltf2interface": "4.2.0",
+        "tslib": ">=1.10.0"
+      }
+    },
+    "@babylonjs/materials": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/materials/download/@babylonjs/materials-4.2.0.tgz",
+      "integrity": "sha1-jYieSfaCTk/GJiKyIfNqsLgzTW4=",
+      "requires": {
+        "@babylonjs/core": "4.2.0",
+        "tslib": ">=1.10.0"
+      }
+    },
+    "@babylonjs/serializers": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/@babylonjs/serializers/download/@babylonjs/serializers-4.2.0.tgz",
+      "integrity": "sha1-yoybdzwZhei0l5DsZfb9z0zqCkk=",
+      "requires": {
+        "@babylonjs/core": "4.2.0",
+        "babylonjs-gltf2interface": "4.2.0",
+        "tslib": ">=1.10.0"
+      }
+    },
    "@firebase/analytics": {
      "version": "0.2.13",
      "resolved": "https://registry.npm.taobao.org/@firebase/analytics/download/@firebase/analytics-0.2.13.tgz",
@ -4177,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",
@ -4231,12 +4296,40 @@
      "resolved": "https://registry.npm.taobao.org/@types/node/download/@types/node-12.12.26.tgz?cache=0&sync_timestamp=1580843161457&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fnode%2Fdownload%2F%40types%2Fnode-12.12.26.tgz",
      "integrity": "sha1-IT4VO6usDtFp1EptkZUB5o9Z3qk="
    },
+    "@types/prop-types": {
+      "version": "15.7.4",
+      "resolved": "https://registry.nlark.com/@types/prop-types/download/@types/prop-types-15.7.4.tgz?cache=0&sync_timestamp=1629708829833&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fprop-types%2Fdownload%2F%40types%2Fprop-types-15.7.4.tgz",
+      "integrity": "sha1-/PcgXCXf95Xuea8eMNosl5CAjxE="
+    },
    "@types/q": {
      "version": "0.0.32",
      "resolved": "https://registry.npm.taobao.org/@types/q/download/@types/q-0.0.32.tgz",
      "integrity": "sha1-vShOV8hPEyXacCur/IKlMoGQwMU=",
      "dev": true
    },
+    "@types/react": {
+      "version": "17.0.33",
+      "resolved": "https://registry.npmmirror.com/@types/react/download/@types/react-17.0.33.tgz?cache=0&sync_timestamp=1635212002524&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Freact%2Fdownload%2F%40types%2Freact-17.0.33.tgz",
+      "integrity": "sha1-4Brj3nYT2sEJRWmIC7N5JzIgOtU=",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/react-dom": {
+      "version": "17.0.10",
+      "resolved": "https://registry.npmmirror.com/@types/react-dom/download/@types/react-dom-17.0.10.tgz",
+      "integrity": "sha1-1pcuwBjSPPIrmVl/Eok0PZnqnZ0=",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.nlark.com/@types/scheduler/download/@types/scheduler-0.16.2.tgz",
+      "integrity": "sha1-GmL4lSVyPd4kuhsBsJK/XfitTTk="
+    },
    "@types/selenium-webdriver": {
      "version": "3.0.16",
      "resolved": "https://registry.npm.taobao.org/@types/selenium-webdriver/download/@types/selenium-webdriver-3.0.16.tgz?cache=0&sync_timestamp=1576496118589&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40types%2Fselenium-webdriver%2Fdownload%2F%40types%2Fselenium-webdriver-3.0.16.tgz",
@ -4971,6 +5064,11 @@
        "object.assign": "^4.1.0"
      }
    },
+    "babylonjs-gltf2interface": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/babylonjs-gltf2interface/download/babylonjs-gltf2interface-4.2.0.tgz",
+      "integrity": "sha1-sO8eEeNXTPLG9XPQxcNIV6KnsyI="
+    },
    "backo2": {
      "version": "1.0.2",
      "resolved": "https://registry.npm.taobao.org/backo2/download/backo2-1.0.2.tgz",
@ -5609,6 +5707,11 @@
      "integrity": "sha1-4J28LdPikoRCQD4tRbQc6ga8CpM=",
      "dev": true
    },
+    "class-transformer": {
+      "version": "0.4.0",
+      "resolved": "https://registry.nlark.com/class-transformer/download/class-transformer-0.4.0.tgz",
+      "integrity": "sha1-tSFEEXtCPFFq+0TMHHbbrTHCFls="
+    },
    "class-utils": {
      "version": "0.3.6",
      "resolved": "https://registry.npm.taobao.org/class-utils/download/class-utils-0.3.6.tgz",
@ -6512,6 +6615,11 @@
        "css-tree": "1.0.0-alpha.37"
      }
    },
+    "csstype": {
+      "version": "3.0.9",
+      "resolved": "https://registry.nlark.com/csstype/download/csstype-3.0.9.tgz?cache=0&sync_timestamp=1631540658518&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcsstype%2Fdownload%2Fcsstype-3.0.9.tgz",
+      "integrity": "sha1-ZBCvMbJr0FIJM9AsvGT86c4/vws="
+    },
    "custom-event": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/custom-event/download/custom-event-1.0.1.tgz",
@ -6983,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",
@ -9171,6 +9279,11 @@
        }
      }
    },
+    "install": {
+      "version": "0.13.0",
+      "resolved": "https://registry.nlark.com/install/download/install-0.13.0.tgz",
+      "integrity": "sha1-avbp2p3QmH3iq0IPeOYNnBcmB3Y="
+    },
    "internal-ip": {
      "version": "4.3.0",
      "resolved": "https://registry.npm.taobao.org/internal-ip/download/internal-ip-4.3.0.tgz",
@ -13508,8 +13621,7 @@
    "reflect-metadata": {
      "version": "0.1.13",
      "resolved": "https://registry.npm.taobao.org/reflect-metadata/download/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha1-Z648pXyXKiqhZCsQ/jY/4y1J3Ag=",
-      "dev": true
+      "integrity": "sha1-Z648pXyXKiqhZCsQ/jY/4y1J3Ag="
    },
    "regenerate": {
      "version": "1.4.0",
--- a/package.json
+++ b/package.json
@ -12,7 +12,7 @@
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.0.0",
-    "@angular/cdk": "^9.0.0",
+    "@angular/cdk": "^9.2.4",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
--- a/src/app/pages/home/home.component.html
+++ b/src/app/pages/home/home.component.html
@ -13,7 +13,7 @@
            违规记录
        </li>
    </div>
-    <div>
+    <div class="content">
        <router-outlet></router-outlet>
    </div>
 </div>
--- a/src/app/pages/home/home.component.scss
+++ b/src/app/pages/home/home.component.scss
@ -1,8 +1,12 @@
+
 .box{
    width: 100%;
    height: 100%;
    overflow: hidden;
-    background: #001f3e;
+    background: #01122e;
+    display: flex;
+    flex-direction: column;
+    // overflow: hidden;
 }
 .menu{
    height: 52px;
@ -17,7 +21,15 @@
        line-height: 52px;
        text-align: center;
        cursor: pointer;
+        font-family: sybold;
+        color: #EBFAFF;
    }
+ 
+}
+.content{
+    flex: 1;
+    // background-image: radial-gradient(#004987,#03447c,#02325c,#012341,#01122e);
+    // background: red;
 }
 .router-link-active{
    background-image: linear-gradient(to right, #052D5A , #0B416F,#136B93,#1F7C93,#136B93,#0B416F,#052D5A);
--- a/src/app/pages/login/login.component.html
+++ b/src/app/pages/login/login.component.html
@ -3,42 +3,6 @@
    <div>
      <div class="card">
        <span class="cardheader">XXXXXXXXXX</span>
-        <!-- <form (ngSubmit)="onSubmit(form.value)" #form="ngForm" class="example-container">
-
-          <div class="input">
-            <label class="position"><mat-icon>account_box</mat-icon></label>
-            <mat-form-field>
-              <input matInput id="name" name="name"
-              required type="text"
-              ngModel #name="ngModel" placeholder="请输入账号">
-            </mat-form-field>
-          </div>
-
-          <div class="input">
-            <label class="position"><mat-icon>lock</mat-icon></label>
-            <mat-form-field>
-              <input matInput id="password" name="password" type='password'
-              required
-              ngModel #password="ngModel" placeholder="请输入密码">
-            </mat-form-field>
-          </div>
-
-          <div *ngIf="errmsg" class="alert-danger input">
-            {{errmsg}}
-          </div>
-          <div class="register">
-            <a href="javascript:void(0);" style="margin-left: 100px;" class="forget">
-              忘记密码?
-              <div class="contactUs">
-                <label style="font-size: 14px; text-align: center; width: 100%; display: block; color: #fff;">安信科创QQ号</label>
-                <img src="../../../assets/images/AnXinQQ.jpg">
-              </div>
-            </a>
-            <a href="javascript:void(0);" (click)='toRegister()' style="margin-left: 180px;">快速注册</a>
-          </div>
-
-          <button type="submit" [disabled]="!form.form.valid" class="loginbtn" mat-button>登录</button>
-        </form> -->
        <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
          <nz-form-item>
            <nz-form-control nzErrorTip="请输入用户名!">
--- a/src/app/pages/pages.module.ts
+++ b/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';
@ -61,18 +26,20 @@ import { CriminalRecordsComponent } from './criminal-records/criminal-records.co
 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,
@ -82,7 +49,9 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
    NzButtonModule,
    NzSelectModule,
    NzDatePickerModule,
-    NzIconModule
+    NzIconModule,
+    NzGridModule,
+    NzModalModule
  ]
 })
 export class PagesModule { }
--- a/src/app/pages/today-warning/today-warning.component.html
+++ b/src/app/pages/today-warning/today-warning.component.html
@ -3,7 +3,7 @@
    当日违规事件列表
  </div>
  <div class="search">
-    <form nz-form  [nzLayout]="'inline'" [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
+    <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="请选择级别">
@ -46,13 +46,48 @@
        </nz-form-control>
      </nz-form-item>

-      <nz-form-item style="margin-right: 0;"  class="btn">
+      <nz-form-item class="btn">
        <nz-form-control>
-          <button nz-button type="button" class="reset"><i nz-icon [nzType]="'sync'"></i>重置</button>
+          <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="warningnumber">
+    <span class="num">39</span>
+    <span class="today">今日违规</span>
+  </div>
+  <div class="listbox">
+    <div nz-row class="listitem" *ngFor="let item of list">
+      <div nz-col nzSpan="4">
+        <span *ngIf="item.level === 1">Ⅰ级违法事件</span>
+        <span *ngIf="item.level === 2">Ⅱ级违法事件</span>
+        <span *ngIf="item.level === 3">Ⅲ级违法事件</span>
+      </div>
+      <div nz-col nzSpan="4">
+        编号:{{item.num}}
+      </div>
+      <div nz-col nzSpan="5">
+        违规行为:{{item.content}}
+      </div>
+      <div nz-col nzSpan="4">
+        违规地点:{{item.site}}
+      </div>
+      <div nz-col nzSpan="5">
+        违规时间:{{item.time}}
+      </div>
+      <div nz-col nzSpan="2">
+        <button nz-button (click)="showModal()">查看</button>
+        <nz-modal [nzBodyStyle]="{ background: 'red' }" nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisible" [nzMaskClosable]="false" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzFooter]="null">
+          <p>Content one</p>
+          <p>Content two</p>
+          <p>Content three</p>
+          <p>Content three</p>
+        </nz-modal>
+      </div>
+    </div>
+  </div>
 </div>
--- 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;
        }
+      }
    }
-}
+
+  }
+}
+
+::ng-deep .vertical-center-modal {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+::ng-deep .vertical-center-modal .ant-modal {
+  top: 0;
+}
--- 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;
+  }
 }
--- a/src/assets/font-family/sybold.OTF
+++ b/src/assets/font-family/sybold.OTF
--- a/src/assets/font-family/synormal.OTF
+++ b/src/assets/font-family/synormal.OTF
--- a/src/assets/font-family/titlefont.TTF
+++ b/src/assets/font-family/titlefont.TTF
--- a/src/index.html
+++ b/src/index.html
@ -6,7 +6,6 @@
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href='./assets/icon/material-icons.css' rel="stylesheet">
 </head>
 <body>
  <app-root></app-root>
--- a/src/styles.scss
+++ b/src/styles.scss
@ -1,12 +1,26 @@
 // @import "~ng-zorro-antd/ng-zorro-antd.min.css";
+@font-face {
+  font-family: titlefont;
+  src: url("./assets/font-family/titlefont.TTF");
+}
+@font-face {
+  font-family: sybold;
+  src: url("./assets/font-family/sybold.OTF");
+}
+@font-face {
+  font-family: synormal;
+  src: url("./assets/font-family/synormal.OTF");
+}
 html,
 body {
-	width: 100%;
-	height: 100%;
-	margin: 0 auto;
-	padding: 0;
-	overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  font-family: synormal!important;
 }
+
 ul,
 ol,
 dl,
@ -33,9 +47,10 @@ time,
 mark,
 main,
 canvas {
-	margin: 0;
-	padding: 0;
+  margin: 0;
+  padding: 0;
 }
+
 b,
 strong,
 i,
@ -46,42 +61,50 @@ h3,
 h4,
 h5,
 h6 {
-	font-weight: 500;
-	font-style: normal;
+  font-weight: 500;
+  font-style: normal;
 }
+
 img {
-	border: none;
+  border: none;
 }
+
 a {
-	text-decoration: none;
-	color: #000;
+  text-decoration: none;
+  color: #000;
 }
+
 ul,
 ol,
 li {
-	list-style: none;
-	overflow-x: hidden;
+  list-style: none;
+  overflow-x: hidden;
 }
+
 .clearfn:after {
-	content: "";
-	clear: both;
-	display: block;
-	overflow: hidden;
-	height: 0;
-	visibility: hidden;
+  content: "";
+  clear: both;
+  display: block;
+  overflow: hidden;
+  height: 0;
+  visibility: hidden;
 }
+
 //root标签
 app-root {
-	height: 100%;
+  height: 100%;
 }
+
 h1 {
-	font-size: 16px;
+  font-size: 16px;
 }
+
 //滚动条样式
 ::-webkit-scrollbar {
-	width: 5px;
-	background-color: white;
+  width: 5px;
+  background-color: white;
 }
+
 ::-webkit-scrollbar-thumb {
-	background-color: #999;
+  background-color: #999;
 }
--- a/src/theme.less
+++ b/src/theme.less
@ -2,27 +2,29 @@

 // @component-background: #002552;

-@border-color-base: #8aacce;
-
-// @text-color: #8aacce;
-@text-color: #8aacce;
-// @select-item-selected-bg: red;


+@border-color-base: #8aacce;

@select-background:#002552;

-.ant-select-arrow {
-	color: #8aacce;
-}
-.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
-    border-radius: 0px;
-}
-.ant-picker{
+.ant-select-single:not(.ant-select-customize-input) .ant-select-selector,.ant-picker,.ant-btn{
    border-radius: 0px;
 }

+//日期选择器
@input-placeholder-color: #8aacce;
 .ant-picker-suffix{
    color: #8aacce;
+    
+}
+.ant-picker-input > input{
+    color: #fff;
+}
+//弹窗遮罩层
+.ant-modal-mask{
+    background: rgba(0,0,0,0.05);
+}
+.ant-modal-content{
+    box-shadow: 0px 0px 4px #fff; 
 }