消防设施UI完善

src/app/pages/left-domain/left-domain.component.html

@@ -19,7 +19,7 @@
     <!-- 加油机 -->
     <div class="publicBox refueller" *ngIf="beforeFence === 1">
       <div class="interval">
-        <p class="title">一类加油机</p>
+        <p class="title">1类加油机</p>
         <div class="table">
           <div class="tableHeader">
             <p>品牌</p>
@@ -39,6 +39,36 @@
       </div>
     </div>
     <!-- 加油机 -->
+    <!-- 油罐设备 -->
+    <div class="publicBox refueller oilTank" *ngIf="beforeFence === 2">
+      <div class="interval">
+        <p class="title">1号油罐</p>
+        <div class="table">
+          <div class="tableHeader">
+            <p>油品品号</p>
+            <p>油罐容积</p>
+            <p>安全容积</p>
+            <p>数量</p>
+            <p>罐区</p>
+            <p>油罐类型</p>
+          </div>
+          <div class="tableContent">
+            <p>92#</p>
+            <p>200L</p>
+            <p>180L</p>
+            <p>1</p>
+            <p>独立罐区</p>
+            <p>防渗罐池</p>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 油罐设备 -->
+    <!-- 消防设施 -->
+    <div class="publicBox fireFacilities" *ngIf="beforeFence === 3">
+      <nz-tree #nzTreeComponent [nzData]="treeData"></nz-tree>
+    </div>
+    <!-- 消防设施 -->
   </div>
 
   <div class="childBottom" *ngIf="beforeFence === 0">

src/app/pages/left-domain/left-domain.component.scss

@@ -63,4 +63,15 @@
       p{ padding-left: 20px; border-bottom: 1px solid #91CCFF; }
     }
   }
+}
+.oilTank{ //油管设备
+
+}
+.fireFacilities{ //消防设施
+  .ant-tree{
+    height: 32px;
+    line-height: 32px;
+    background-color: transparent;
+    color: #C4E2FC;
+  }
 }

src/app/pages/left-domain/left-domain.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
 import { PlanComponent } from '../plan/plan.component';
 
 @Component({
@@ -15,6 +16,8 @@ export class LeftDomainComponent implements OnInit {
   }
 
   beforeFence: number; //当前选中功能栏
+  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+  treeData: NzTreeNodeOptions[] = treeData.nodes; //tree data
 
   //初始化组件
   initComponent(type?: number) {
@@ -38,3 +41,31 @@ export class LeftDomainComponent implements OnInit {
 
 
 }
+
+export class treeData {
+  static nodes: NzTreeNodeOptions[] = [
+    {
+      title: '灭火器',
+      key: '1',
+      selectable: false,
+      children: [
+        { title: '4KG手提干粉灭火器', key: '1', selectable: false, },
+        { title: '4KG手提泡沫灭火器', key: '2', selectable: false, },
+        { title: '4KG手提二氧化碳灭火器', key: '3', selectable: false, },
+        { title: '35KG手推灭火器', key: '4', selectable: false, },
+      ]
+    },
+    {
+      title: '灭火毯',
+      key: '2',
+      selectable: false,
+      children: []
+    },
+    {
+      title: '消防锹',
+      key: '3',
+      selectable: false,
+      children: []
+    },
+  ];
+}

src/app/pages/pages.module.ts

@@ -29,6 +29,7 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
 import { NzMessageModule } from 'ng-zorro-antd/message';
 import { NzSpinModule } from 'ng-zorro-antd/spin';
+import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { TodayWarningAdminComponent } from './today-warning-admin/today-warning-admin.component';
 import { CriminalRecordsAdminComponent } from './criminal-records-admin/criminal-records-admin.component';
 import { EquipmentInfoComponent } from './equipment-info/equipment-info.component';
@@ -63,7 +64,8 @@ import { EditequipmentComponent } from './equipment-info/editequipment/editequip
     NzPaginationModule,
     NzDropDownModule,
     NzMessageModule,
-    NzSpinModule
+    NzSpinModule,
+    NzTreeModule
   ]
 })
 export class PagesModule { }