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

package-lock.json

@@ -241,16 +241,16 @@
       "integrity": "sha1-jSuFLFJzvMFh0T+C+q81ZqtWKVE="
     },
     "@angular/cdk": {
-      "version": "9.0.0",
+      "version": "9.2.4",
-      "resolved": "https://registry.npm.taobao.org/@angular/cdk/download/@angular/cdk-9.0.0.tgz",
+      "resolved": "https://registry.npmmirror.com/@angular/cdk/download/@angular/cdk-9.2.4.tgz",
-      "integrity": "sha1-VzSBeulwRPkNME+g8lycGn+gv5Y=",
+      "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",
+      "version": "2.2.3",
-      "resolved": "https://registry.npm.taobao.org/earcut/download/earcut-2.2.2.tgz",
+      "resolved": "https://registry.nlark.com/earcut/download/earcut-2.2.3.tgz",
-      "integrity": "sha1-QbC8NfY+D+gNp83f8oUR5+LoDRE="
+      "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=",
+      "integrity": "sha1-Z648pXyXKiqhZCsQ/jY/4y1J3Ag="
-      "dev": true
     },
     "regenerate": {
       "version": "1.4.0",

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",

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

@@ -13,7 +13,7 @@
             违规记录
         </li>
     </div>
-    <div>
+    <div class="content">
         <router-outlet></router-outlet>
     </div>
 </div>

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);

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="请输入用户名!">

src/app/pages/pages.module.ts

@@ -7,43 +7,8 @@ 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 { }

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>

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

@@ -1,39 +1,121 @@
 .warningbox {
   width: 100%;
   height: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
   .title {
+    box-sizing: border-box;
+    padding: 0 20PX;
     width: 100%;
     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: 21.5%;
+        width: 22%;
+      }
+
+      .btn {
+        width: 5%;
+      }
+
+      nz-select {
+        color: #fff;
       }
+
       nz-date-picker {
-            width: 145%;
+
         background-color: #002552;
-            color: #8aacce;
+        width: 145%;
       }
-        button{
+
-            width: 84px;
     }
+
     .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;
 }

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

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

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>

src/styles.scss

@@ -1,4 +1,16 @@
 // @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%;
@@ -6,7 +18,9 @@ body {
   margin: 0 auto;
   padding: 0;
   overflow: hidden;
+  font-family: synormal!important;
 }
+
 ul,
 ol,
 dl,
@@ -36,6 +50,7 @@ canvas {
   margin: 0;
   padding: 0;
 }
+
 b,
 strong,
 i,
@@ -49,19 +64,23 @@ h6 {
   font-weight: 500;
   font-style: normal;
 }
+
 img {
   border: none;
 }
+
 a {
   text-decoration: none;
   color: #000;
 }
+
 ul,
 ol,
 li {
   list-style: none;
   overflow-x: hidden;
 }
+
 .clearfn:after {
   content: "";
   clear: both;
@@ -70,18 +89,22 @@ li {
   height: 0;
   visibility: hidden;
 }
+
 //root标签
 app-root {
   height: 100%;
 }
+
 h1 {
   font-size: 16px;
 }
+
 //滚动条样式
 ::-webkit-scrollbar {
   width: 5px;
   background-color: white;
 }
+
 ::-webkit-scrollbar-thumb {
   background-color: #999;
 }

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 {
+.ant-select-single:not(.ant-select-customize-input) .ant-select-selector,.ant-picker,.ant-btn{
-	color: #8aacce;
-}
-.ant-select-single:not(.ant-select-customize-input) .ant-select-selector{
-    border-radius: 0px;
-}
-.ant-picker{
     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; 
 }