[新增]完成器材信息页面UI

src/app/pages/equipment-info/addequipment/addequipment.component.html

@@ -0,0 +1 @@
+<p>addequipment works!</p>

src/app/pages/equipment-info/addequipment/addequipment.component.ts

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

src/app/pages/equipment-info/editequipment/editequipment.component.html

@@ -0,0 +1 @@
+<p>editequipment works!</p>

src/app/pages/equipment-info/editequipment/editequipment.component.ts

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

src/app/pages/equipment-info/equipment-info.component.html

@@ -1 +1,82 @@
-<p>equipment-info works!</p>
+<!-- <p>器材管理</p> -->
+<div class="box" id="equipmentInfo">
+  <div class="content">
+    <div class="title">
+      <app-title [name]="'编辑器材信息'"></app-title>
+    </div>
+    <div class="topbox">
+      <div class="lefttop">
+        <span>消防器材列表</span>
+      </div>
+      <div class="righttop">
+        <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
+          <nz-form-item>
+            <nz-form-control>
+              <nz-input-group nzPrefixIcon="search">
+                <input type="text" nz-input placeholder="请输入器材名称" formControlName="search" />
+              </nz-input-group>
+            </nz-form-control>
+            <button style="display: none;" type="submit"></button>
+          </nz-form-item>
+        </form>
+        <button nz-button (click)="add()">新增</button>
+      </div>
+    </div>
+    <div class="tablebox">
+      <div class="table">
+        <div nz-row class="th">
+          <div nz-col nzSpan="5" style="box-sizing: border-box;padding-left: 28px;">
+            消防器材
+          </div>
+          <div nz-col nzSpan="4">
+            规格
+          </div>
+          <div nz-col nzSpan="4">
+            购入日期
+          </div>
+          <div nz-col nzSpan="4">
+            生产日期
+          </div>
+          <div nz-col nzSpan="4">
+            有效期至
+          </div>
+          <div nz-col nzSpan="3">
+            操作
+          </div>
+        </div>
+        <div class="tbody">
+          <div nz-row class="tr" *ngFor="let item of arr">
+            <div nz-col nzSpan="5" style="box-sizing: border-box;padding-left: 28px;">
+              干粉灭火器
+            </div>
+            <div nz-col nzSpan="4">
+              普通
+            </div>
+            <div nz-col nzSpan="4">
+              2021.01.05
+            </div>
+            <div nz-col nzSpan="4">
+              2021.01.05
+            </div>
+            <div nz-col nzSpan="4">
+              2021.01.05
+            </div>
+            <div nz-col nzSpan="3" class="btn">
+              <span>
+                编辑
+              </span>
+              <span>
+                删除
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="pagination">
+        <nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"
+          nzShowQuickJumper></nz-pagination>
+        <ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/equipment-info/equipment-info.component.scss

@@ -0,0 +1,117 @@
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.content {
+  width: 1000px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .title {
+    height: 48px;
+    width: 100%;
+    margin: 16px 0;
+  }
+
+  .topbox {
+    width: 1000px;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    .lefttop {
+      span {
+        color: #C4E2FC;
+        font-size: 16px;
+      }
+    }
+
+    .righttop {
+      height: 34px;
+      display: flex;
+
+      button {
+        margin-left: 16px;
+        background: #143c61;
+        color: #91CCFF;
+        border-radius: 0px;
+        border: 1px solid #36A2FF;
+        width: 64px;
+      }
+
+      nz-input-group {
+        height: 32px;
+      }
+    }
+  }
+
+  .tablebox {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+
+    .table {
+      color: white;
+      flex: 1;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      font-size: 16px;
+
+      .th {
+        height: 40px;
+        line-height: 40px;
+        color: #23D9FF;
+        background: rgba(35, 153, 255, 0.2);
+        border: 1px solid rgba(35, 217, 255, 0.4);
+        // box-shadow:  0 0 3px 1px rgba(35, 217, 255, 0.4);
+      }
+
+      .tbody {
+        flex: 1;
+        overflow-y: auto;
+        color: #C4E2FC;
+        font-size: 15px;
+
+        .tr {
+          height: 40px;
+          line-height: 40px;
+          border-bottom: 1px solid #115188;
+
+          .btn {
+            span {
+              color: #2399FF;
+              cursor: pointer;
+            }
+
+            span:nth-child(1) {
+              margin-right: 18px;
+            }
+          }
+        }
+      }
+    }
+
+    .pagination {
+      height: 32px;
+      margin: 15px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    ::-webkit-scrollbar {
+      width: 0px;
+    }
+
+  }
+}

src/app/pages/equipment-info/equipment-info.component.ts

@@ -1,15 +1,23 @@
 import { Component, OnInit } from '@angular/core';
-
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 @Component({
   selector: 'app-equipment-info',
   templateUrl: './equipment-info.component.html',
   styleUrls: ['./equipment-info.component.scss']
 })
 export class EquipmentInfoComponent implements OnInit {
-
+  validateForm!: FormGroup;
-  constructor() { }
+  constructor(private fb: FormBuilder) { }
-
+  arr = [1,1,1,1,1,1,1,1,1]
   ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      search: [null]
+    });
   }
+  submitForm(){
 
+  }
+  add(){
+
+  }
 }

src/app/pages/pages.module.ts

@@ -34,8 +34,10 @@ import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal
 import { EquipmentInfoComponent } from './equipment-info/equipment-info.component';
 import { OilStationInfoComponent } from './oil-station-info/oil-station-info.component';
 import { LeftDomainComponent } from './left-domain/left-domain.component';
+import { AddequipmentComponent } from './equipment-info/addequipment/addequipment.component';
+import { EditequipmentComponent } from './equipment-info/editequipment/editequipment.component';
 @NgModule({
-  declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent],
+  declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent, TodayWarningAdminComponent, CriminalRecordsAdminComponent, LeftDomainComponent, EquipmentInfoComponent, OilStationInfoComponent, AddequipmentComponent, EditequipmentComponent],
   imports: [
     PagesRoutingModule,
     CommonModule,

src/theme.less

@@ -4,7 +4,8 @@
 
 //分页器
 #recordsboxadmin,
-#recordsbox {
+#recordsbox,
+#equipmentInfo {
 
   .ant-pagination-total-text,
   .ant-pagination-options-quick-jumper {
@@ -111,7 +112,7 @@
 
 
 //登录页input
-#login {
+#login,#equipmentInfo {
 
   nz-input-group,
   input {