处置预案图标完善

src/app/pages/pages.module.ts

@@ -30,6 +30,7 @@ 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 { NzCollapseModule } from 'ng-zorro-antd/collapse';
 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';
@@ -67,7 +68,8 @@ import { EditequipmentComponent } from './equipment-info/editequipment/editequip
     NzDropDownModule,
     NzMessageModule,
     NzSpinModule,
-    NzTreeModule
+    NzTreeModule,
+    NzCollapseModule
   ],
   entryComponents: [AddequipmentComponent, EditequipmentComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

src/app/pages/plan/plan.component.html

@@ -48,12 +48,24 @@
     <!-- 左侧建筑栏 -->
 
     <!-- 右侧图标栏 -->
-    <div class="rightIcons">
+    <div class="rightIcons" *ngIf="selectFence === 0 || selectFence === 7">
       <div class="bottomCenter" id="bottomCenter">
-        <div class="everyIcon" (click)='selectBottomIcon(item)' *ngFor="let item of allFacilityUIItemes" [ngClass]="{'selectLeftIcon': beforeOneIcon == item.getIconID()}">
-          <img [src]="item.getIconURL()">
-          <p>{{item.getIconName()}}</p>
-        </div>
+        <ng-container *ngIf="selectFence === 0">
+          <div class="everyIcon" (click)='selectBottomIcon(item)' *ngFor="let item of allFacilityUIItemes" [ngClass]="{'selectLeftIcon': beforeOneIcon == item.getIconID()}">
+            <img [src]="item.getIconURL()">
+            <p>{{item.getIconName()}}</p>
+          </div>
+        </ng-container>
+        <ng-container *ngIf="selectFence === 7">
+          <nz-collapse [nzBordered]="false">
+            <nz-collapse-panel [nzHeader]="allMarkData.iconsName[key]" [nzActive]="true" *ngFor="let element of allMarkData.icons; let key = index;">
+              <div class="everyIcon" (click)='selectBottomIcon(item)' *ngFor="let item of element" [ngClass]="{'selectLeftIcon': beforeOneIcon == item.key}">
+                <img [src]="item.iconURL">
+                <p>{{item.name}}</p>
+              </div>
+            </nz-collapse-panel>
+          </nz-collapse>
+        </ng-container>
       </div>
     </div>
     <!-- 右侧图标栏 -->

src/app/pages/plan/plan.component.scss

@@ -180,7 +180,7 @@
 
 //右侧图标栏
 .rightIcons{
-  width: 60px;
+  width: 100px;
   height: 70%;
   position: absolute;
   top: 0;
@@ -188,19 +188,23 @@
   right: 1%;
   margin: auto;/*这行代码是关键*/
   color: #fff;
-  background: rgba(0,17,33,0.7);
-  border-radius: 10px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
   overflow: hidden;
   .autoScroll{ width: 30px; text-align: center; }
+  .bottomCenter::-webkit-scrollbar { display: none; }
+  .bottomCenter {
+    scrollbar-width: none; /* firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
   .bottomCenter{
-    flex: 1;
+    width: 100%;
+    height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
     .everyIcon {
-      width: 60px;
+      width: 100px;
       height: 58px;
       line-height: normal;
       text-align: center;

src/app/pages/plan/plan.component.ts

@@ -19,6 +19,9 @@ import { EventManager } from '@angular/platform-browser';
 import { NzMessageService } from 'ng-zorro-antd/message';
 import { LeftDomainComponent } from '../left-domain/left-domain.component';
 import { JYZInfoMoudleType } from 'src/app/babylon/model/data/institution/jyz-show-data';
+import { AllMarkData } from 'src/app/babylon/model/data/mark/all-mark-data';
+import { MarkData } from 'src/app/babylon/model/data/mark/mark-data';
+import { MarkWindow } from 'src/app/babylon/view/mark-window/mark-window';
 
 
 
@@ -241,7 +244,8 @@ export class PlanComponent implements OnInit {
     }
   }
 
-  allFacilityUIItemes: FacilityUIItem[] = []; //底部所有 图标
+  allFacilityUIItemes: FacilityUIItem[] = []; //右侧所有 图标
+  allMarkData: planIcons = new planIcons(); //右侧处置预案所有 图标
   beforeOneIcon: string = null; //当前选择 图标
 
   // 获取 底部图标栏list
@@ -251,13 +255,23 @@ export class PlanComponent implements OnInit {
   }
 
   //选择底部图标
-  selectBottomIcon(e: FacilityUIItem) {
-    if (this.beforeOneIcon != e.getIconID()) {
-      this.beforeOneIcon = e.getIconID()
-      e.select()
-    } else {
-      this.beforeOneIcon = null
-      e.unSelect()
+  selectBottomIcon(e: FacilityUIItem | MarkData) {
+    if (e instanceof FacilityUIItem) {
+      if (this.beforeOneIcon != e.getIconID()) {
+        this.beforeOneIcon = e.getIconID()
+        e.select()
+      } else {
+        this.beforeOneIcon = null
+        e.unSelect()
+      }
+    } else if (e instanceof MarkData) {
+      if (this.beforeOneIcon != e.key) {
+        this.beforeOneIcon = e.key
+        MarkWindow.instance.selectMarkDataPrefab(true, e)
+      } else {
+        this.beforeOneIcon = null
+        MarkWindow.instance.selectMarkDataPrefab(false, e)
+      }
     }
   }
 
@@ -355,6 +369,11 @@ export class PlanComponent implements OnInit {
 
 }
 
+// 处置预案 所有图标
+export class planIcons {
+  iconsName: string[] = ["灾情","内部力量","外部力量","其他"]
+  icons: MarkData[][] = [AllMarkData.CreateAllMarkData().marks_Disaster,AllMarkData.CreateAllMarkData().marks_Inside,AllMarkData.CreateAllMarkData().marks_Outside,AllMarkData.CreateAllMarkData().marks_Other,]
+}
 //创建/编辑 建筑dataType
 export class modelBuilding {
   name: string = "";

src/styles.scss

@@ -104,10 +104,24 @@ h1 {
 
 //三维场景
 #threeDimensional {
-  .ant-tree{ color: #C4E2FC; }
-  .ant-tree,.ant-tree-node-content-wrapper:hover,.ant-tree-node-content-wrapper.ant-tree-node-selected { background-color: transparent; }
-  .ant-tree-node-content-wrapper { width: 100%; }
-  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector { border: none; border-radius: 0px; }
+  .ant-tree{ color: #C4E2FC; } //tree
+  .ant-tree,.ant-tree-node-content-wrapper:hover,.ant-tree-node-content-wrapper.ant-tree-node-selected { background-color: transparent; } //tree
+  .ant-tree-node-content-wrapper { width: 100%; } //tree
+
+  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector { border: none; border-radius: 0px; } //select
+
+  .ant-collapse,.ant-collapse-item,.ant-collapse-header,.ant-collapse-content{ border-radius: 0px; border: none; } //可展开面板
+  .ant-collapse-content{ background: rgba(0, 59, 110, 0.9); color: #fff; } //可展开面板
+  .ant-collapse-content-box{ padding: 0; } //可展开面板
+  .ant-collapse-header{
+    padding: 0 0 0 25px;
+    height: 30px;
+    line-height: 28px;
+    background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
+    border: 1px solid rgba(35, 217, 255, 0.4);
+    color: #23D9FF;
+    .ant-collapse-arrow{ left: 5px; } //可展开面板
+  }
   //滚动条样式	
   ::-webkit-scrollbar {
     width: 5px;