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

package-lock.json

@@ -250,7 +250,7 @@
       "dependencies": {
         "parse5": {
           "version": "5.1.1",
-          "resolved": "https://registry.nlark.com/parse5/download/parse5-5.1.1.tgz",
+          "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",
           "integrity": "sha1-9o5OW6GFKsLK3AD0VV//bCq7YXg=",
           "optional": true
         }

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

@@ -1 +1,78 @@
-<p>违规记录</p>
+<div class="recordsbox">
+  <div class="search">
+    <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="请选择级别">
+            <nz-option nzValue="1" nzLabel="一级"></nz-option>
+            <nz-option nzValue="2" nzLabel="二级"></nz-option>
+            <nz-option nzValue="3" nzLabel="三级"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+
+      <nz-form-item class="searchParams">
+        <nz-form-control>
+          <nz-select id="type" formControlName="type" nzPlaceHolder="请选择事件类型">
+            <nz-option nzValue="1" nzLabel="一级"></nz-option>
+            <nz-option nzValue="2" nzLabel="二级"></nz-option>
+            <nz-option nzValue="3" nzLabel="三级"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+
+      <nz-form-item class="searchParams">
+        <nz-form-control>
+          <nz-select id="site" formControlName="site" nzPlaceHolder="请选择地点">
+            <nz-option nzValue="1" nzLabel="一级"></nz-option>
+            <nz-option nzValue="2" nzLabel="二级"></nz-option>
+            <nz-option nzValue="3" nzLabel="三级"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+
+      <nz-form-item class="searchParams">
+        <nz-form-control [nzSm]="16" [nzXs]="24">
+          <nz-date-picker id="datePicker" formControlName="datePicker" nzPlaceHolder="请选择时间"></nz-date-picker>
+        </nz-form-control>
+      </nz-form-item>
+
+      <nz-form-item class="btn">
+        <nz-form-control>
+          <button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
+        </nz-form-control>
+      </nz-form-item>
+
+      <nz-form-item class="btn">
+        <nz-form-control>
+          <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="content">
+    <div class="title">
+      <app-title></app-title>
+    </div>
+    <div class="chartsbox">
+      <div class="charts">
+
+      </div>
+    </div>
+
+    <div class="title">
+      <app-title></app-title>
+    </div>
+    <div class="tablebox">
+      <div class="table">
+        <div class="th">
+          
+        </div>
+        <div class="tr">
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/criminal-records/criminal-records.component.scss

@@ -0,0 +1,75 @@
+.recordsbox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.content {
+  flex: 1;
+  // background-image: radial-gradient(circle,#004078, #012b57, #00142f);
+
+  .title {
+    margin-bottom: 15px;
+    width: 100%;
+    height: 64px;
+    box-sizing: border-box;
+    padding: 0 28px;
+  }
+  .chartsbox{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    .charts{
+      width: 98%;
+      height: 300px;
+      border: 1px solid white;
+    }
+  }
+}
+
+.search {
+  box-sizing: border-box;
+  padding: 0 36px;
+  width: 100%;
+  height: 32px;
+  margin: 20px 0px;
+
+  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%;
+    }
+
+  }
+
+  .submit {
+    background-color: #013064;
+    border: 1px solid #4c8ac8;
+    color: #86bff3;
+  }
+
+  .reset {
+    background-color: #010d26;
+    border: 1px solid #4c8ac8;
+    color: #86bff3;
+  }
+}

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

@@ -1,15 +1,37 @@
 import { Component, OnInit } from '@angular/core';
-
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 @Component({
   selector: 'app-criminal-records',
   templateUrl: './criminal-records.component.html',
   styleUrls: ['./criminal-records.component.scss']
 })
 export class CriminalRecordsComponent implements OnInit {
-
-  constructor() { }
+  validateForm!: FormGroup;
+  constructor(private fb: FormBuilder) { }
 
   ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      level: [null],
+      type: [null],
+      site: [null],
+      datePicker: [null]
+    });
+  }
+  submitForm(): void {
+    for (const i in this.validateForm.controls) {
+      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();
+    }
   }
 
 }

src/app/pages/home/home.component.scss

@@ -1,36 +1,38 @@
-
-.box{
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    background: #01122e;
-    display: flex;
-    flex-direction: column;
-    // overflow: hidden;
+.box {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-image: radial-gradient(closest-side at 50% 55%,#03447c, #02325c, #002046);
+  display: flex;
+  flex-direction: column;
 }
-.menu{
+
+.menu {
+  height: 52px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 17px;
+
+  li {
+    width: 10%;
     height: 52px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 17px;
-    li{
-        width: 10%;
-        height: 52px;
-        line-height: 52px;
-        text-align: center;
-        cursor: pointer;
-        font-family: sybold;
-        color: #EBFAFF;
-    }
- 
+    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;
+
+.content {
+  flex: 1;
+  overflow: hidden;
+
+}
+
+.router-link-active {
+  background-image: linear-gradient(to right, #052D5A, #0B416F, #136B93, #1F7C93, #136B93, #0B416F, #052D5A);
 }
-.router-link-active{
-    background-image: linear-gradient(to right, #052D5A , #0B416F,#136B93,#1F7C93,#136B93,#0B416F,#052D5A);
-}

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

@@ -81,11 +81,8 @@
       </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 nzWidth="1100" nzWrapClassName="vertical-center-modal" [(nzVisible)]="isVisible" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()" [nzFooter]="null">
+          
         </nz-modal>
       </div>
     </div>

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

@@ -84,10 +84,8 @@
   .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;
@@ -110,12 +108,30 @@
   }
 }
 
+
+//遮罩层
 ::ng-deep .vertical-center-modal {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+::ng-deep .ant-modal-body {
+  background: #072549;
+  height: 660px;
+  padding: 5px;
+  // border: 1px solid #8eb9e3;
+  box-shadow: 0 0 3px #8eb9e3;
+  color: #fff;
+}
+
+::ng-deep .ant-modal-close-x {
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  color: white;
+}
+
 ::ng-deep .vertical-center-modal .ant-modal {
   top: 0;
 }

src/app/ui/title/title.component.html

@@ -0,0 +1,8 @@
+<div class="titlebox">
+    <img src="../../../assets/images/AnXinQQ.jpg" alt="">
+    <div class="content">
+        <div class="contentitem">
+            <span>违规类型统计</span>
+        </div>
+    </div>
+</div>

src/app/ui/title/title.component.scss

@@ -0,0 +1,34 @@
+.titlebox {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+
+  img {
+    max-width: 46px;
+    max-height: 46px;
+  }
+
+  .content {
+    flex: 1;
+    height: 46px;
+    display: flex;
+    align-items: center;
+    background-image: linear-gradient(to right, #002147, #033565, #064e8e, #064e8e, #033565, #002147);
+
+    .contentitem {
+      width: 100%;
+      height: 33px;
+      line-height: 33px;
+      background-image: linear-gradient(to right, #002147, #0f5ca0, #1c88e6, #1c88e6, #0f5ca0, #002147);
+
+      span {
+        margin-left: 20px;
+        color: #bce0ff;
+        font-size: 20px;
+        font-family: titlefont;
+      }
+    }
+
+  }
+}

src/app/ui/title/title.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-title',
+  templateUrl: './title.component.html',
+  styleUrls: ['./title.component.scss']
+})
+export class TitleComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/ui/ui.module.ts

@@ -18,8 +18,9 @@ import { PaginatorModule } from './paginator/paginator.module';
 import { TabbarComponent } from './tabbar/tabbar.component';
 
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
+import { TitleComponent } from './title/title.component';
 @NgModule({
-  declarations: [TabbarComponent,UserdataComponent, ChangepasswordComponent, IsnoPipe, ConfirmpswDirective, TimePipe, EditUser],
+  declarations: [TabbarComponent,UserdataComponent, ChangepasswordComponent, IsnoPipe, ConfirmpswDirective, TimePipe, EditUser, TitleComponent],
 
   imports: [
     CommonModule,
@@ -37,7 +38,7 @@ import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
     NzDropDownModule
   ],
 
-  exports:[TabbarComponent]
+  exports:[TabbarComponent,TitleComponent]
 
 })
 export class UiModule { }

src/styles.scss

@@ -3,14 +3,17 @@
   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%;
@@ -18,7 +21,7 @@ body {
   margin: 0 auto;
   padding: 0;
   overflow: hidden;
-  font-family: synormal!important;
+  font-family: synormal !important;
 }
 
 ul,
@@ -101,10 +104,11 @@ h1 {
 
 //滚动条样式
 ::-webkit-scrollbar {
-  width: 5px;
-  background-color: white;
+  width: 10px;
 }
-
 ::-webkit-scrollbar-thumb {
-  background-color: #999;
+  background-image: linear-gradient(#2495f8, #1c73c2,#0a3d6a, #061d3c);
+}
+::-webkit-scrollbar-track {
+  background-color: #061d3c;
 }

src/theme.less

@@ -6,25 +6,27 @@
 
 @border-color-base: #8aacce;
 
-@select-background:#002552;
+@select-background: #002552;
 
-.ant-select-single:not(.ant-select-customize-input) .ant-select-selector,.ant-picker,.ant-btn{
-    border-radius: 0px;
+.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-suffix {
+  color: #8aacce;
+
 }
-.ant-picker-input > input{
-    color: #fff;
+
+.ant-picker-input>input {
+  color: #fff;
 }
+
 //弹窗遮罩层
-.ant-modal-mask{
-    background: rgba(0,0,0,0.05);
+.ant-modal-mask {
+  background: rgba(0, 0, 0, 0.05);
 }
-.ant-modal-content{
-    box-shadow: 0px 0px 4px #fff; 
-}